:root{--sky:#72cfff;--sky-soft:#e5f8ff;--pink:#ff78bd;--pink-hot:#ff4fa7;--pink-soft:#ffe2f1;--blue:#155bd8;--navy:#08277d;--gold:#ffc84a;--cream:#fffaf7;--lav:#f4ecff;--ink:#063186;--muted:#5071b0;--glass:rgba(255,255,255,.78);--line:rgba(27,91,190,.22);--shadow:0 18px 45px rgba(29,76,168,.18);--deep-shadow:0 26px 75px rgba(4,35,117,.30);--radius:24px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--navy);font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;background:radial-gradient(circle at 18% 5%,rgba(255,120,189,.35),transparent 28%),radial-gradient(circle at 84% 15%,rgba(255,200,74,.28),transparent 24%),linear-gradient(135deg,#bdecff 0%,#eef8ff 42%,#ffe3f2 100%);overflow-x:hidden}body.modal-open{overflow:hidden}a{color:inherit}button,input,select{font:inherit}.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 2px,transparent 3px),radial-gradient(circle,rgba(255,255,255,.95) 0 1px,transparent 2px);background-size:110px 110px,70px 70px;opacity:.72;animation:twinkle 8s linear infinite}@keyframes twinkle{50%{opacity:.3;transform:translateY(-6px)}}.site{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;min-height:100vh;padding:18px}.sidebar,.topbar,.panel,.detail,.info-strip{background:var(--glass);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow);backdrop-filter:blur(14px)}.sidebar{border-radius:28px;padding:16px;position:sticky;top:18px;height:calc(100vh - 36px);display:flex;flex-direction:column;gap:14px;overflow:auto}.brand{text-align:center}.logo{width:min(260px,100%);height:auto;display:block;margin:0 auto;object-fit:contain;filter:drop-shadow(0 12px 15px rgba(12,61,160,.25))}.binder-ribbon{display:inline-block;margin-top:-16px;padding:8px 22px;border-radius:999px;background:linear-gradient(180deg,#ff89c8,#f13491);color:#fff;font-weight:900;letter-spacing:.04em;text-shadow:0 2px 0 rgba(153,0,84,.35);box-shadow:0 8px 18px rgba(255,78,163,.25);transform:rotate(-2deg)}.side-card{border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,226,241,.70));border:1px solid rgba(97,164,255,.26);padding:16px}.side-title{margin:0 0 10px;color:var(--navy);font-size:.86rem;text-transform:uppercase;letter-spacing:.04em}.big-stat{font-size:2rem;font-weight:900;color:var(--blue)}.bar{height:13px;background:#cfe4ff;border-radius:999px;overflow:hidden;border:1px solid rgba(21,91,216,.18)}.bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),#ffacd6,var(--gold));border-radius:999px;transition:width .35s ease}.mini-series{display:grid;gap:10px}.mini-row{font-size:.86rem}.mini-row b{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px}.filters{display:grid;gap:12px}.filters label{font-weight:900;color:var(--navy);font-size:.8rem}.filters select,.search{width:100%;border:1px solid #b8d4ff;border-radius:14px;padding:11px 12px;background:#fff;color:var(--navy);outline:none}.checkline{display:flex;align-items:center;gap:8px;margin:8px 0;color:var(--navy);font-size:.9rem}.main{display:grid;gap:14px;align-content:start}.topbar{position:sticky;top:12px;z-index:40;border-radius:24px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;min-height:72px}.nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.nav a{display:flex;gap:8px;align-items:center;text-decoration:none;padding:16px 18px;border-radius:18px;font-weight:900;color:var(--navy);transition:.18s}.nav a:hover,.nav a.active{background:linear-gradient(180deg,#ffacd6,#ff5db0);color:white;box-shadow:0 8px 18px rgba(255,78,163,.26);transform:translateY(-1px)}.top-actions{display:flex;gap:10px;align-items:center}.search{min-width:min(320px,34vw);box-shadow:inset 0 1px 3px rgba(18,70,150,.08)}.star-btn{width:48px;height:48px;border-radius:50%;border:0;background:linear-gradient(180deg,#ff7dc1,#ff4fa7);color:#fff;font-size:1.4rem;box-shadow:0 10px 20px rgba(255,79,167,.25)}.series-hero{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(230px,320px);gap:14px;align-items:center;padding:12px 18px;min-height:88px;background:linear-gradient(125deg,rgba(255,255,255,.82),rgba(238,248,255,.74),rgba(255,226,241,.48))}.eyebrow{margin:0 0 2px;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-hot);font-weight:900}.series-hero h1,.page-head h1{margin:0;color:var(--navy);font-size:clamp(1.55rem,3vw,2.15rem);font-style:italic;line-height:1.02}.series-hero p,.page-head p{margin:5px 0 0;color:#174198;font-size:.95rem}.compact-stat{display:inline-flex;gap:8px;align-items:center;padding:9px 12px;border-radius:16px;background:rgba(255,255,255,.65);border:1px solid rgba(97,164,255,.25);font-weight:900;color:var(--blue)}.starlight-mode{position:relative;display:flex;align-items:center;justify-content:end;gap:9px;font-size:.86rem;color:var(--navy)}.toggle-pill{width:48px;height:26px;border:0;border-radius:999px;background:#c7ddff;padding:3px;cursor:pointer}.toggle-pill span{display:block;width:20px;height:20px;border-radius:50%;background:white;box-shadow:0 2px 5px rgba(0,0,0,.18);transition:transform .2s ease}.toggle-pill.on{background:linear-gradient(90deg,#72cfff,#ff78bd)}.toggle-pill.on span{transform:translateX(22px)}.help-dot{width:24px;height:24px;border-radius:50%;border:0;background:#fff;color:var(--blue);font-weight:900;box-shadow:0 3px 8px rgba(20,80,170,.12)}.mode-tip{position:absolute;right:0;top:34px;width:310px;z-index:20;display:none;padding:12px;border-radius:16px;background:#fff;box-shadow:var(--shadow);border:1px solid #cfe0ff;color:var(--muted)!important}.help-dot:hover+.mode-tip,.help-dot:focus+.mode-tip{display:block}.binder-meta{padding:0 2px;font-weight:900;color:#244ca3}.workarea{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}.binder-wrap{min-width:0}.binder-book{position:relative;min-height:535px;background:linear-gradient(90deg,#f6f1e9,#fff,#f6f1e9);border-radius:28px;padding:22px 28px;box-shadow:inset 0 0 0 3px rgba(97,77,60,.12),var(--shadow);display:grid;grid-template-columns:1fr 1fr;gap:32px;overflow:hidden}.binder-book::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 45%,rgba(255,120,189,.06))}.binder-book:before{content:"";position:absolute;top:22px;bottom:22px;left:50%;width:12px;transform:translateX(-50%);background:linear-gradient(90deg,#cbc0bb,#fff,#cbc0bb);border-radius:999px;box-shadow:0 0 0 1px rgba(50,35,25,.12)}.ring{position:absolute;left:50%;transform:translateX(-50%);width:38px;height:18px;border:4px solid #b4858b;border-left:0;border-right:0;border-radius:999px;background:#ffd7df;z-index:2}.ring.r1{top:20%}.ring.r2{top:40%}.ring.r3{top:60%}.ring.r4{top:80%}.binder-page{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:8px;border-radius:20px;background:rgba(255,255,255,.45);border:1px dashed rgba(61,97,150,.18);z-index:1}.slot{position:relative;min-width:0;aspect-ratio:2.5/3.5;border-radius:16px;background:linear-gradient(145deg,rgba(200,221,255,.55),rgba(255,219,237,.5));padding:7px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75);transform-style:preserve-3d}.empty-slot{opacity:.38}.card-tile{width:100%;height:100%;border:0;padding:0;background:none;perspective:1000px;cursor:pointer}.card-inner{position:relative;width:100%;height:100%;display:block;transition:transform .65s cubic-bezier(.2,.85,.2,1),filter .2s ease;transform-style:preserve-3d}.card-tile:hover .card-inner{transform:translateY(-8px) rotateX(9deg) rotateY(12deg) scale(1.035);filter:drop-shadow(0 22px 26px rgba(8,39,125,.27))}.card-tile.tap-tilt .card-inner{transform:rotateY(14deg) scale(1.05)}.face{position:absolute;inset:0;border-radius:12px;overflow:hidden;backface-visibility:hidden;background:#fff;box-shadow:0 8px 16px rgba(13,60,148,.18)}.face img{width:100%;height:100%;object-fit:cover;display:block}.back{transform:rotateY(180deg)}.badge{position:absolute;left:8px;top:8px;background:#0f49b7;color:#fff;border-radius:8px;padding:3px 7px;font-size:.75rem;font-weight:900;z-index:3}.fav{position:absolute;right:8px;top:8px;color:var(--pink);font-size:1.05rem;text-shadow:0 1px 0 #fff;z-index:3}.obscured{filter:brightness(.78) saturate(.9) blur(.35px)}.rarity-legendary .face{box-shadow:0 0 0 2px var(--gold),0 0 20px rgba(255,207,70,.35),0 14px 34px rgba(255,191,0,.38)}.rarity-epic .face{box-shadow:0 0 0 2px #b57cff,0 0 18px rgba(193,118,255,.34),0 12px 28px rgba(181,124,255,.28)}.rarity-rare .face{box-shadow:0 0 0 2px #56a5ff,0 12px 24px rgba(86,165,255,.22)}@keyframes shine{60%,100%{transform:translateX(120%)}}.tiny-reveal{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:4;border:0;border-radius:999px;padding:9px 15px;color:#fff;background:linear-gradient(180deg,#ff8bca,#ff4fa7);font-size:.82rem;font-weight:900;opacity:.94;transition:.2s;box-shadow:0 8px 18px rgba(255,79,167,.25);white-space:nowrap}.tiny-reveal:hover{bottom:13px;transform:translateX(-50%) scale(1.08);box-shadow:0 0 0 5px rgba(255,120,189,.18),0 12px 22px rgba(255,79,167,.32)}.is-collected .tiny-reveal{background:linear-gradient(180deg,#7bcfff,#4a99ed)}.reveal-burst .card-inner::after{content:"";position:absolute;inset:-24px;border-radius:24px;background:radial-gradient(circle,rgba(255,255,255,.96),rgba(255,120,189,.65) 32%,rgba(255,200,74,.48) 48%,transparent 70%);animation:revealBurst 1.15s ease-out forwards;z-index:10}.reveal-burst .card-inner::before{content:"✨";position:absolute;inset:0;display:grid;place-items:center;font-size:2rem;z-index:11;animation:sparkPop 1.1s ease-out forwards}@keyframes revealBurst{0%{transform:scale(.25);opacity:0}28%{transform:scale(1.05);opacity:1}100%{transform:scale(1.55);opacity:0}}@keyframes sparkPop{0%{opacity:0;transform:scale(.5) rotate(0deg)}35%{opacity:1;transform:scale(1.4) rotate(12deg)}100%{opacity:0;transform:scale(2.3) rotate(45deg)}}.detail{border-radius:28px;padding:20px;position:sticky;top:100px;align-self:start;min-height:calc(100vh - 120px)}.detail-actions{display:flex;gap:10px;justify-content:center;margin-bottom:12px;flex-wrap:wrap}.btn{border:0;border-radius:16px;padding:12px 18px;font-weight:900;cursor:pointer;color:var(--navy);background:linear-gradient(180deg,#fff,#e9f4ff);box-shadow:0 5px 12px rgba(43,104,194,.12);transition:.18s ease;text-decoration:none}.btn:hover{transform:translateY(-2px);filter:brightness(1.04)}.btn.primary{color:white;background:linear-gradient(180deg,#ff90ca,#ff55ad)}.btn.blue{color:white;background:linear-gradient(180deg,#7bcfff,#4a99ed)}.btn.wide{width:100%}.reveal-big{font-size:1.02rem;padding:14px 22px;box-shadow:0 0 0 5px rgba(114,207,255,.16),0 12px 22px rgba(74,153,237,.2)}.preview-card{width:min(100%,292px);margin:0 auto 14px;perspective:1200px;border:0;background:transparent;padding:0;display:block;cursor:zoom-in}.preview-inner{aspect-ratio:2.5/3.5;position:relative;display:block;transform-style:preserve-3d;transition:.7s;filter:drop-shadow(0 18px 28px rgba(8,39,125,.24))}.preview-card:hover .preview-inner{transform:rotateX(4deg) rotateY(-5deg) scale(1.02)}.preview-card.flipped .preview-inner{transform:rotateY(180deg)}.preview-card.flipped:hover .preview-inner{transform:rotateY(180deg) rotateX(4deg) scale(1.02)}.preview-card img{width:100%;height:100%;object-fit:cover}.detail h2{margin:.2rem 0;color:var(--navy)}.pill{display:inline-block;border-radius:999px;background:#ffe8b7;color:#9b5a00;padding:5px 10px;font-size:.8rem;font-weight:900}.detail-list{display:grid;gap:6px;margin:14px 0}.detail-list p{display:flex;justify-content:space-between;gap:10px;margin:0;padding-bottom:6px;border-bottom:1px solid rgba(21,91,216,.14);color:#33539a}.description{color:#33539a;line-height:1.55}.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}.pager button{width:42px;height:42px;border-radius:50%;border:0;background:#ffd9ee;color:#ff4fa7;font-size:1.4rem;font-weight:900;cursor:pointer}.page-label{font-weight:900}.info-strip{border-radius:22px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:.9rem}.info-strip p{margin:0;color:var(--muted)}.info-strip b{color:var(--navy)}.page-head{padding:22px}.grid-page{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}.grid-page.empty-grid{display:block}.collection-card{border-radius:20px;background:rgba(255,255,255,.78);border:1px solid var(--line);padding:12px;box-shadow:var(--shadow);transition:.18s}.collection-card:hover{transform:translateY(-4px)}.collection-card img{width:100%;aspect-ratio:2.5/3.5;object-fit:cover;border-radius:14px}.collection-card h3{margin:10px 0 4px;color:var(--navy)}.collection-card p{margin:0;color:var(--muted);font-size:.9rem}.card-buttons{display:flex;gap:8px;margin-top:10px}.text-card{padding:18px}.empty-state{display:grid;justify-items:start;gap:12px;max-width:420px;padding:24px;border-radius:22px;background:rgba(255,255,255,.76);border:1px solid var(--line);box-shadow:var(--shadow)}.empty-state h2{margin:0}.empty-state p{margin:0;color:var(--muted)}.table-wrap{padding:14px;overflow:auto}.table{width:100%;border-collapse:separate;border-spacing:0 10px}.table th{text-align:left;color:var(--navy);font-size:.84rem;text-transform:uppercase}.table td,.table th{padding:10px}.table tr.item{background:rgba(255,255,255,.78);box-shadow:var(--shadow)}.table tr.item td:first-child{border-radius:14px 0 0 14px}.table tr.item td:last-child{border-radius:0 14px 14px 0}.check-card{display:flex;align-items:center;gap:10px;font-weight:900}.check-card img{width:52px;aspect-ratio:2.5/3.5;object-fit:cover;border-radius:8px;box-shadow:0 5px 10px rgba(13,60,148,.16)}.icon-btn{border:1px solid #bad6ff;border-radius:12px;background:#fff;color:var(--navy);padding:8px 11px;cursor:pointer;font-weight:900}.link-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}.link-card{display:block;padding:24px;border-radius:22px;background:rgba(255,255,255,.78);box-shadow:var(--shadow);border:1px solid var(--line);font-weight:900;text-decoration:none}#cardOverlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(4,20,65,.56);backdrop-filter:blur(9px);padding:28px}#cardOverlay.open{display:flex}.full-card-stage{position:relative;display:grid;place-items:center;max-width:min(900px,96vw);width:100%;min-height:min(860px,92vh);border-radius:34px;background:radial-gradient(circle at 50% 50%,rgba(255,120,189,.28),transparent 36%),radial-gradient(circle at 50% 60%,rgba(255,200,74,.24),transparent 30%),linear-gradient(135deg,rgba(9,22,84,.86),rgba(71,39,126,.82));border:2px solid rgba(255,255,255,.65);box-shadow:var(--deep-shadow),inset 0 0 80px rgba(114,207,255,.30);animation:modalPop .25s ease-out;overflow:hidden}.full-card-stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 2px,transparent 3px);background-size:68px 68px;opacity:.34;animation:twinkle 5s ease-in-out infinite}@keyframes modalPop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}.full-card-wrap{position:relative;width:min(430px,70vw);aspect-ratio:2.5/3.5;border-radius:24px;z-index:2;perspective:1200px;animation:floatCard 3s ease-in-out infinite}.full-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s}.full-card-wrap.flipped .full-inner{transform:rotateY(180deg)}.full-card-wrap img{width:100%;height:100%;object-fit:cover;border-radius:24px;box-shadow:0 0 0 4px rgba(255,255,255,.4),0 28px 70px rgba(0,0,0,.40)}.full-card-glow{position:absolute;inset:-22px;border-radius:34px;border:2px solid rgba(114,207,255,.6);box-shadow:0 0 28px rgba(114,207,255,.7),inset 0 0 24px rgba(255,120,189,.45);pointer-events:none}@keyframes floatCard{50%{transform:translateY(-10px)}}.overlay-close,.overlay-arrow,.overlay-flip{position:absolute;z-index:5;border:0;cursor:pointer;color:white;background:linear-gradient(180deg,#ff8bca,#ff4fa7);box-shadow:0 12px 25px rgba(255,79,167,.25)}.overlay-close{top:18px;right:18px;width:54px;height:54px;border-radius:50%;font-size:2rem}.overlay-flip{top:20px;left:50%;transform:translateX(-50%);border-radius:999px;padding:13px 22px;font-weight:900}.overlay-arrow{top:50%;transform:translateY(-50%);width:62px;height:62px;border-radius:50%;font-size:3rem;line-height:.8}.overlay-arrow.left{left:24px}.overlay-arrow.right{right:24px}.full-caption{position:absolute;bottom:26px;z-index:3;text-align:center;color:white;text-shadow:0 2px 8px rgba(0,0,0,.32)}.full-caption h2{margin:0 0 4px;font-size:2rem}.full-caption p{margin:0}@media(max-width:1250px){.site{grid-template-columns:1fr}.sidebar{position:relative;height:auto;top:0}.workarea{grid-template-columns:1fr}.detail{position:relative;top:0;min-height:0}}@media(max-width:900px){.series-hero{grid-template-columns:1fr}.binder-book{grid-template-columns:1fr}.binder-book:before,.ring{display:none}.search{min-width:0}}@media(max-width:700px){.site{padding:10px}.topbar{align-items:stretch;flex-direction:column;padding:12px}.nav a{padding:12px}.top-actions{width:100%}.search{flex:1}.binder-page{grid-template-columns:repeat(2,1fr)}.sidebar .side-card.filters{display:none}.table{font-size:.86rem}.overlay-arrow{width:46px;height:46px;font-size:2.2rem}.overlay-arrow.left{left:8px}.overlay-arrow.right{right:8px}}

/* V6 polish tweaks */
.site{grid-template-columns:270px minmax(0,1fr);gap:14px;padding:12px;min-height:100dvh}.sidebar{top:12px;height:calc(100dvh - 24px);overflow:hidden;padding:12px;gap:10px}.logo{width:min(225px,100%)}.binder-ribbon{margin-top:-12px;padding:7px 20px}.side-card{padding:12px;border-radius:18px}.side-title{margin-bottom:7px}.big-stat{font-size:1.65rem}.mini-series{gap:7px}.mini-row{font-size:.78rem}.filters{gap:8px}.filters select,.search{padding:9px 11px}.topbar{top:8px;min-height:58px;border-radius:20px;padding:0 10px}.nav a{padding:12px 14px;border-radius:15px}.main{gap:10px}.top-actions{margin-left:auto}.series-hero{grid-template-columns:minmax(0,1fr) minmax(255px,340px);gap:10px;min-height:62px;padding:10px 16px;border-radius:22px;position:relative;overflow:visible}.series-hero:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(255,120,189,.10),transparent 45%,rgba(114,207,255,.14));pointer-events:none}.series-hero h1{font-size:clamp(1.35rem,2.2vw,1.85rem)}.series-hero p{font-size:.86rem;margin-top:3px;max-width:850px}.starlight-mode{font-size:.8rem}.mode-tip{width:min(340px,75vw);font-size:.84rem}.workarea{grid-template-columns:minmax(0,1fr) 320px;gap:12px}.binder-book{min-height:min(54vh,470px);padding:16px 22px;gap:24px;border-radius:24px}.binder-page{gap:10px;padding:7px;border-radius:17px}.slot{padding:5px;border-radius:13px}.face{border-radius:10px}.detail{position:sticky;top:78px;min-height:0;max-height:calc(100dvh - 92px);overflow:hidden;padding:14px;border-radius:22px}.preview-card{width:min(100%,245px);margin-bottom:10px}.detail h2{font-size:1.22rem;margin:.05rem 0}.detail-list{gap:4px;margin:9px 0}.detail-list p{font-size:.86rem;padding-bottom:5px}.description{font-size:.88rem;line-height:1.35;margin:.4rem 0}.detail-actions{gap:8px;margin-bottom:9px}.btn{padding:10px 14px;border-radius:14px}.reveal-big{font-size:1rem;padding:13px 19px}.pager{margin-top:8px}.pager button{width:36px;height:36px}.info-strip{padding:10px 14px;border-radius:18px}.star-btn,.compact-stat{display:none!important}

/* calmer card hover: no skewy 3D, just a polished lift and glow */
.card-inner{transition:transform .28s ease,filter .28s ease,box-shadow .28s ease}.card-tile:hover .card-inner{transform:translateY(-6px) scale(1.025);filter:drop-shadow(0 14px 20px rgba(8,39,125,.22))}.card-tile:hover .face{box-shadow:0 0 0 2px rgba(255,255,255,.95),0 0 18px rgba(255,120,189,.22),0 10px 24px rgba(21,91,216,.20)}.card-tile.tap-tilt .card-inner{transform:scale(1.06)}

/* bigger, more satisfying reveal button */
.tiny-reveal{bottom:9px;padding:10px 18px;font-size:.9rem;letter-spacing:.02em;background:linear-gradient(180deg,#ff9bd1,#ff43a5);box-shadow:0 0 0 3px rgba(255,255,255,.55),0 10px 22px rgba(255,79,167,.28)}.tiny-reveal:hover{bottom:14px;transform:translateX(-50%) scale(1.1);box-shadow:0 0 0 7px rgba(255,120,189,.16),0 0 24px rgba(255,79,167,.38),0 14px 28px rgba(21,91,216,.18)}.is-collected .tiny-reveal{background:linear-gradient(180deg,#8bd9ff,#4a99ed)}.reveal-burst .card-inner{animation:revealPop .95s ease both}@keyframes revealPop{0%{transform:scale(.92);filter:brightness(1.4) drop-shadow(0 0 0 rgba(255,120,189,0))}35%{transform:scale(1.1);filter:brightness(1.35) drop-shadow(0 0 28px rgba(255,120,189,.75))}100%{transform:scale(1);filter:drop-shadow(0 16px 24px rgba(8,39,125,.22))}}


.rarity-epic .face{box-shadow:0 0 0 2px rgba(174,123,255,.75),0 8px 22px rgba(125,96,220,.24)}.rarity-legendary .face{box-shadow:0 0 0 2px rgba(255,201,59,.98),0 0 16px rgba(255,201,59,.55),0 0 30px rgba(255,120,189,.25),0 15px 34px rgba(255,179,0,.30)}@keyframes cleanShine{0%,52%{transform:translateX(-130%)}78%,100%{transform:translateX(135%)}}@keyframes legendaryPulse{0%,100%{filter:brightness(1);opacity:.58}50%{filter:brightness(1.55);opacity:.95}}


.overlay-tools{position:absolute;top:20px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:6}

/* better contact cards */
.social-links .link-card{display:grid;gap:5px;min-height:120px}.social-links .link-card span{font-size:2rem}.social-links .link-card b{font-size:1.15rem}.social-links .link-card small{color:var(--muted);font-weight:700;word-break:break-word}

@media (max-height:850px) and (min-width:1000px){.sidebar{gap:8px}.side-card{padding:10px}.logo{width:min(198px,100%)}.binder-ribbon{font-size:.9rem}.workarea{grid-template-columns:minmax(0,1fr) 300px}.binder-book{min-height:445px;padding:14px 20px}.binder-page{gap:8px}.preview-card{width:min(100%,215px)}.detail{font-size:.92rem}.description{font-size:.82rem;line-height:1.26}.btn{padding:9px 12px}.series-hero{min-height:55px}.topbar{min-height:52px}.nav a{padding:10px 12px}}
@media (max-width:1180px){.site{grid-template-columns:1fr}.sidebar{position:relative;height:auto;overflow:visible}.workarea{grid-template-columns:1fr}.detail{position:relative;top:auto;max-height:none}.binder-book{min-height:520px}.search{min-width:220px}}


.sfx-toggle{width:42px;height:42px;border-radius:999px;border:0;background:linear-gradient(180deg,#ffffff,#eaf6ff);box-shadow:0 8px 18px rgba(29,77,170,.14);color:var(--blue-deep,#12338f);font-weight:900;cursor:pointer}.sfx-toggle.on{background:linear-gradient(180deg,#ff96cf,#ff4fa7);color:#fff;box-shadow:0 10px 22px rgba(255,79,167,.26)}
.series-hero{align-items:center;background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,240,250,.64) 50%,rgba(224,245,255,.72));box-shadow:0 10px 30px rgba(67,116,209,.12)}
.series-hero .hero-copy{display:grid;gap:4px}.series-stats{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}.hero-pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:5px 10px;background:rgba(255,255,255,.72);border:1px solid rgba(150,185,255,.35);font-size:.78rem;font-weight:900;color:#14348f}.hero-pill.progress{background:linear-gradient(90deg,rgba(255,137,203,.18),rgba(255,215,93,.22))}.hero-pill.epic{color:#743ad8}.hero-pill.legendary{color:#a86f00;background:linear-gradient(90deg,rgba(255,220,88,.28),rgba(255,255,255,.75))}
.booster-shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:-3px}.booster-pack{position:relative;isolation:isolate;overflow:hidden;min-height:78px;text-align:left;border:1px solid rgba(255,255,255,.72);border-radius:20px;padding:14px 16px;color:#14348f;background:linear-gradient(135deg,#fff8fc,#e6f6ff 60%,#fff3c8);box-shadow:0 12px 30px rgba(34,86,190,.12);cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}.booster-pack:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(34,86,190,.18);filter:saturate(1.06)}.booster-pack b{display:block;font-size:1rem}.booster-pack small{display:block;margin-top:5px;color:#4a63aa;font-weight:800}.pack-spark{position:absolute;right:-18px;top:-20px;width:90px;height:90px;background:radial-gradient(circle,#fff 0 9%,transparent 10%),radial-gradient(circle at 50% 50%,rgba(255,76,167,.25),transparent 62%);filter:blur(.2px);animation:packSpark 3s ease-in-out infinite;z-index:-1}@keyframes packSpark{50%{transform:rotate(18deg) scale(1.1);opacity:.65}}
.binder-book.pack-open{animation:packOpen .8s ease both}@keyframes packOpen{0%{filter:brightness(1);transform:scale(1)}35%{filter:brightness(1.18) saturate(1.2);transform:scale(1.012)}100%{filter:brightness(1);transform:scale(1)}}
/* Replace jittery hover with clean sticker lift and spotlight */
.card-tile:hover .card-inner{transform:translateY(-7px) scale(1.035)!important;filter:drop-shadow(0 18px 18px rgba(35,78,185,.18)) drop-shadow(0 0 16px rgba(255,126,196,.18))}.card-tile:hover .face:after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.34),transparent 38%);pointer-events:none;mix-blend-mode:screen}.tap-tilt .card-inner{animation:softBounce .42s ease}@keyframes softBounce{0%{transform:scale(1)}50%{transform:scale(1.07)}100%{transform:scale(1)}}

.rarity-epic .face,.rarity-epic.collection-card{box-shadow:0 0 0 2px rgba(176,127,255,.58),0 10px 22px rgba(126,86,217,.16)}
.rarity-legendary .face,.rarity-legendary.collection-card{box-shadow:0 0 0 2px rgba(255,215,92,.96),0 0 20px rgba(255,205,68,.55),0 0 34px rgba(255,145,209,.22),0 18px 36px rgba(206,138,0,.25)}@keyframes legendaryConstellation{to{background-position:18px -16px,-14px 12px,10px 18px,-10px -14px,0 0}}
/* Reveal theater */
#revealOverlay{position:fixed;inset:0;z-index:9999;display:none;place-items:center;background:rgba(22,22,58,.42);backdrop-filter:blur(10px)}#revealOverlay.open{display:grid}.reveal-stage{position:relative;display:grid;place-items:center;gap:12px;width:min(680px,92vw);min-height:min(760px,88vh);border-radius:34px;overflow:hidden;padding:32px;background:radial-gradient(circle at 50% 48%,rgba(255,255,255,.32),transparent 26%),radial-gradient(circle at 50% 58%,rgba(255,116,196,.25),transparent 34%),linear-gradient(135deg,rgba(85,155,255,.92),rgba(86,56,157,.92));box-shadow:0 28px 90px rgba(18,41,116,.45),inset 0 0 80px rgba(255,255,255,.18);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.22)}.reveal-stage:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.85) 0 1px,transparent 2px);background-size:42px 42px;animation:twinkle 4s ease-in-out infinite;opacity:.42}.reveal-card-wrap{position:relative;width:min(360px,62vw);aspect-ratio:2.5/3.5;perspective:1200px;z-index:2;filter:drop-shadow(0 22px 40px rgba(0,0,0,.36));animation:revealFloat 2.3s ease-in-out infinite}.reveal-card{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .88s cubic-bezier(.2,.8,.2,1)}.reveal-back .reveal-card{transform:rotateY(180deg)}.reveal-card-wrap.flip-now .reveal-card{transform:rotateY(0deg)}.reveal-card-wrap.charging{animation:revealShake .45s ease-in-out infinite}.reveal-card img{width:100%;height:100%;object-fit:cover;border-radius:24px;box-shadow:0 0 0 4px rgba(255,255,255,.5),0 0 26px rgba(255,255,255,.26)}.reveal-title{z-index:2;margin:0;font-size:clamp(1.6rem,4vw,2.5rem)}.reveal-sub{z-index:2;margin:0;font-weight:900}.reveal-skip{position:absolute;top:18px;right:18px;z-index:3;border:0;border-radius:999px;padding:11px 18px;background:linear-gradient(180deg,#ff8bca,#ff4fa7);color:#fff;font-weight:900;box-shadow:0 12px 28px rgba(255,79,167,.28);cursor:pointer}.reveal-orbit{position:absolute;inset:50% auto auto 50%;width:440px;height:440px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(255,255,255,.18);animation:orbitSpin 9s linear infinite}.reveal-orbit i{position:absolute;width:16px;height:16px;border-radius:50%;background:#fff4a2;box-shadow:0 0 18px #fff}.reveal-orbit i:nth-child(1){left:10%;top:48%}.reveal-orbit i:nth-child(2){right:18%;top:14%;background:#ff9bd3}.reveal-orbit i:nth-child(3){right:9%;bottom:24%;background:#8ee5ff}@keyframes revealFloat{50%{transform:translateY(-12px)}}@keyframes revealShake{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-3px) rotate(-1deg)}75%{transform:translateX(3px) rotate(1deg)}}@keyframes orbitSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* Favorite showcase */
.favorite-showcase{min-height:220px;margin-bottom:16px;overflow:hidden}.favorite-stage{position:relative;display:flex;align-items:end;gap:clamp(10px,2vw,24px);min-height:280px;padding:28px 22px;border-radius:26px;background:radial-gradient(circle at 50% 10%,rgba(255,255,255,.82),transparent 28%),linear-gradient(135deg,rgba(255,196,226,.35),rgba(211,240,255,.45));overflow-x:auto}.fav-spot{flex:0 0 150px;border:0;background:transparent;color:#14348f;font-weight:900;cursor:pointer;transform:translateY(calc((var(--i) % 2) * -18px));transition:transform .22s ease,filter .22s ease}.fav-spot:hover{transform:translateY(-24px) scale(1.05)}.fav-spot img{width:100%;border-radius:16px;box-shadow:0 18px 35px rgba(28,72,168,.24)}.fav-spot span{display:block;margin-top:8px}.trophy-empty{width:100%;min-height:170px;background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(255,238,248,.76));border-radius:22px;padding:24px;text-align:center}

@keyframes spin{to{transform:rotate(360deg)}}
@media(max-height:850px) and (min-width:1000px){.booster-shelf{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}.booster-pack{min-height:62px;padding:10px 12px}.booster-pack small{font-size:.72rem}.series-stats{gap:4px}.hero-pill{font-size:.7rem;padding:4px 8px}.reveal-card-wrap{width:min(310px,56vw)}}

/* V8: series pack landing, epic reveal theater, cleaner favorites, tooltip modal */
.mode-tip{display:none!important}.help-dot{position:relative;z-index:5}.series-hero{overflow:visible!important}.starlight-mode{position:relative;z-index:20}.starlight-mode .toggle-pill{box-shadow:0 0 0 1px rgba(255,255,255,.75),0 8px 18px rgba(93,146,220,.18)}
#modeHelp{position:fixed;inset:0;z-index:9999;display:none;place-items:center;background:rgba(30,45,105,.28);backdrop-filter:blur(8px)}#modeHelp.open{display:grid}.mode-help-card{position:relative;width:min(460px,92vw);border-radius:28px;padding:28px;background:linear-gradient(145deg,#ffffff,#eaf8ff 52%,#ffe3f2);border:1px solid rgba(255,255,255,.95);box-shadow:0 30px 90px rgba(20,55,150,.32);color:var(--navy)}.mode-help-card h2{margin:0 0 12px;font-size:2rem}.mode-help-card p{line-height:1.55;color:#3158a4}.mode-help-close{position:absolute;top:12px;right:12px;width:42px;height:42px;border-radius:50%;border:0;background:linear-gradient(180deg,#ff8bca,#ff4fa7);color:#fff;font-weight:900;font-size:1.4rem;cursor:pointer}

body.series-select .workarea,body.series-select .binder-meta{display:none!important}body:not(.series-select) #seriesLanding{display:none!important}.series-landing{padding:20px;border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(234,248,255,.74) 45%,rgba(255,226,241,.78));box-shadow:0 18px 48px rgba(29,76,168,.16)}.series-landing-head{text-align:center;margin:4px auto 18px;max-width:760px}.series-landing-head h2{margin:.1rem 0;font-size:clamp(1.8rem,3.5vw,3.25rem);color:var(--navy);letter-spacing:.01em}.series-landing-head p{color:#3a61ab;font-weight:800}.series-pack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}.series-pack-card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:130px 1fr;align-items:center;gap:16px;min-height:230px;text-align:left;border:1px solid rgba(255,255,255,.95);border-radius:30px;padding:18px;color:var(--navy);background:radial-gradient(circle at 80% 18%,rgba(255,215,96,.34),transparent 26%),linear-gradient(145deg,#fff,#e6f7ff 52%,#ffe3f4);box-shadow:0 20px 48px rgba(36,83,180,.16);cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}.series-pack-card:hover{transform:translateY(-6px) scale(1.012);box-shadow:0 26px 62px rgba(36,83,180,.24);filter:saturate(1.08)}.series-pack-card img{width:124px;height:auto;filter:drop-shadow(0 16px 20px rgba(55,51,130,.28));animation:packFloat 4.2s ease-in-out infinite}.series-pack-card b{display:block;font-size:1.45rem;margin-bottom:8px}.series-pack-card small{display:block;min-height:38px;color:#4867a7;font-weight:800;line-height:1.35}.series-pack-card em{display:block;margin-top:10px;font-style:normal;color:#e24b9f;font-weight:900}.open-pack-cta{display:inline-flex;width:max-content;margin-top:14px;padding:10px 16px;border-radius:999px;background:linear-gradient(180deg,#ff8bca,#ff4fa7);color:#fff;font-weight:900;box-shadow:0 10px 20px rgba(255,79,167,.22)}.pack-bg-sparkles{position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 18% 22%,rgba(255,255,255,.95) 0 2px,transparent 3px),radial-gradient(circle at 84% 30%,rgba(255,255,255,.85) 0 2px,transparent 3px),radial-gradient(circle at 70% 78%,rgba(255,215,96,.75) 0 2px,transparent 3px);animation:twinkle 3.5s ease-in-out infinite}@keyframes packFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}
#backToSeries{display:inline-flex;margin-right:auto}.btn.soft{background:rgba(255,255,255,.74);color:#153893;border:1px solid rgba(122,171,255,.35)}
#packOverlay{position:fixed;inset:0;z-index:9998;display:none;place-items:center;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.20),rgba(30,25,100,.62));backdrop-filter:blur(10px)}#packOverlay.open{display:grid}.pack-open-stage{position:relative;display:grid;place-items:center;text-align:center;color:#fff;isolation:isolate}.pack-open-stage img{width:min(360px,64vw);filter:drop-shadow(0 30px 46px rgba(0,0,0,.34));animation:packOpenFloat 1.7s ease-in-out both}.pack-open-stage h2{font-size:clamp(1.8rem,4vw,3.2rem);margin:12px 0 0;text-shadow:0 3px 12px rgba(0,0,0,.28)}.pack-open-stage p{font-weight:900}.pack-light{position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#fff,rgba(255,217,97,.7),rgba(255,120,189,.18),transparent 70%);filter:blur(8px);animation:packLight 1.7s ease-in-out both;z-index:-1}.pack-open-stage.burst .pack-light{width:760px;height:760px}@keyframes packOpenFloat{0%{opacity:0;transform:translateY(40px) scale(.8) rotate(-8deg)}55%{opacity:1;transform:translateY(-10px) scale(1.04) rotate(4deg)}100%{transform:translateY(0) scale(.96) rotate(0)}}@keyframes packLight{0%{transform:scale(.4);opacity:.25}75%{transform:scale(3.8);opacity:.9}100%{transform:scale(5);opacity:.2}}

/* cleaner binder hover: lift, glow, tiny sparkle; no awkward 3D tilt */
.card-tile{transform:none!important;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}.card-tile:hover{transform:translateY(-5px) scale(1.025)!important;filter:saturate(1.08) brightness(1.03)}.card-tile:hover .face{box-shadow:0 12px 28px rgba(35,81,180,.22),0 0 0 2px rgba(255,255,255,.82)}.card-tile:hover:after{content:"✨";position:absolute;right:7px;top:5px;font-size:1.05rem;animation:sparkPop .7s ease both;z-index:4}@keyframes sparkPop{0%{transform:scale(.2) rotate(-15deg);opacity:0}55%{opacity:1}100%{transform:scale(1.05) rotate(10deg);opacity:.8}}
.tiny-reveal{font-size:.88rem;padding:9px 10px;border-radius:999px;background:linear-gradient(180deg,#fff,#eaf6ff);border:1px solid rgba(122,171,255,.35);color:#14348f;font-weight:900;box-shadow:0 8px 16px rgba(70,105,190,.12);transition:transform .18s ease, box-shadow .18s ease}.tiny-reveal:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 10px 20px rgba(255,79,167,.24),0 0 0 3px rgba(255,137,203,.22)}.is-hidden .tiny-reveal{background:linear-gradient(180deg,#ff8bca,#ff4fa7);color:#fff;animation:revealPulse 2.2s ease-in-out infinite}@keyframes revealPulse{50%{box-shadow:0 0 0 6px rgba(255,120,189,.14),0 10px 24px rgba(255,79,167,.25)}}


.rarity-epic .face,.rarity-epic.collection-card,.rarity-epic.fav-spot{box-shadow:0 0 0 2px rgba(170,130,255,.42),0 10px 26px rgba(126,86,217,.13)}.rarity-legendary .face,.rarity-legendary.collection-card,.rarity-legendary.fav-spot{box-shadow:0 0 0 2px rgba(255,218,77,.98),0 0 12px rgba(255,223,96,.72),0 0 28px rgba(255,164,212,.25),0 16px 34px rgba(211,143,0,.22)}

/* Longer reveal stage */
#revealOverlay{position:fixed;inset:0;z-index:10000;display:none;place-items:center;background:radial-gradient(circle at 50% 50%,rgba(255,246,255,.10),rgba(16,20,80,.72));backdrop-filter:blur(12px)}#revealOverlay.open{display:grid}.epic-reveal{position:relative;display:grid;place-items:center;text-align:center;isolation:isolate;color:#fff}.reveal-card-wrap{width:min(385px,62vw);perspective:1200px;filter:drop-shadow(0 28px 38px rgba(0,0,0,.34));transition:transform .55s ease}.reveal-card{position:relative;aspect-ratio:2.5/3.5;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}.reveal-card .face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden}.reveal-card .back{transform:rotateY(0deg)}.reveal-card .front{transform:rotateY(180deg)}.reveal-card-wrap.flip-now .reveal-card{transform:rotateY(180deg)}.reveal-card-wrap.charging{transform:scale(1.05)}.reveal-card-wrap.super-charged{transform:scale(1.12);animation:revealShake .5s ease-in-out 2}.reveal-orbit{position:absolute;width:min(560px,82vw);aspect-ratio:1;border-radius:50%;border:2px dashed rgba(255,255,255,.35);animation:spin 8s linear infinite;z-index:-1}.reveal-orbit i,.reveal-bg-stars i{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 22px #fff,0 0 36px #ff89c8}.reveal-orbit i:nth-child(1){left:50%;top:-5px}.reveal-orbit i:nth-child(2){right:8%;bottom:18%}.reveal-orbit i:nth-child(3){left:12%;bottom:22%}.reveal-bg-stars{position:absolute;inset:-160px;z-index:-2;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%);animation:twinkle 2.6s ease-in-out infinite}.reveal-bg-stars i:nth-child(1){left:5%;top:20%;animation:floatStar 3s ease-in-out infinite}.reveal-bg-stars i:nth-child(2){left:82%;top:18%;animation:floatStar 3.4s ease-in-out infinite}.reveal-bg-stars i:nth-child(3){left:72%;top:76%;animation:floatStar 2.9s ease-in-out infinite}.reveal-bg-stars i:nth-child(4){left:20%;top:82%;animation:floatStar 3.6s ease-in-out infinite}.reveal-title{font-size:clamp(1.55rem,4vw,3rem);margin:18px 0 0;text-shadow:0 3px 18px rgba(0,0,0,.32)}.reveal-sub{font-weight:900;color:#ffe2f1}.reveal-skip{position:fixed;top:22px;right:22px;border:0;border-radius:999px;background:linear-gradient(180deg,#ff8bca,#ff4fa7);color:#fff;font-weight:900;padding:13px 22px;box-shadow:0 15px 30px rgba(255,79,167,.28);cursor:pointer}@keyframes revealShake{25%{transform:scale(1.12) rotate(-1.2deg)}75%{transform:scale(1.12) rotate(1.2deg)}}@keyframes floatStar{50%{transform:translateY(-16px) scale(1.25);opacity:.7}}

/* Collection favorites: horizontal only */
.hidden-favorite-grid{display:none!important}.favorite-showcase{overflow:hidden;padding:20px}.favorite-carousel-head{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:14px}.favorite-carousel-head h2{margin:0;font-size:clamp(1.35rem,2.5vw,2.1rem)}.favorite-carousel-head p{margin:0;color:#4a63aa;font-weight:800}.favorite-carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 18px}.fav-spot{flex:0 0 170px;scroll-snap-align:start;position:relative;border:0;border-radius:22px;background:linear-gradient(145deg,#fff,#eaf8ff 65%,#ffe4f2);padding:12px;color:#14348f;font-weight:900;box-shadow:0 14px 32px rgba(34,86,190,.13);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.fav-spot:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(34,86,190,.22)}.fav-spot img{width:100%;border-radius:14px;display:block;margin-bottom:8px}.fav-spot span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grid-page.empty-grid{display:block}.empty-state{max-width:none;width:100%;text-align:center;padding:26px;border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(234,248,255,.72));border:1px solid rgba(255,255,255,.8)}

/* make page fit a little tighter on desktop */
@media(min-width:1100px){.workarea{grid-template-columns:minmax(0,1fr) 320px}.binder-book{min-height:min(52vh,450px)}.detail{max-height:calc(100dvh - 86px)}.preview-card{width:min(100%,232px)}.series-hero{min-height:54px;padding:9px 15px}.series-hero h1{font-size:clamp(1.25rem,2vw,1.65rem)}.series-hero p{font-size:.82rem}.sidebar{width:100%}.side-card{padding:10px}.filters{font-size:.88rem}.logo{width:min(205px,100%)}}
@media(max-width:900px){body.series-select .workarea{display:none!important}.series-pack-card{grid-template-columns:95px 1fr}.series-pack-card img{width:92px}.series-pack-card b{font-size:1.2rem}}

/* V9 clean-up: simpler, stable, prettier card motion and reveal flow */
.card-tile,
.card-tile:hover,
.card-tile:focus-visible {
  transform: none !important;
}
.card-inner,
.card-tile:hover .card-inner,
.card-tile.tap-tilt .card-inner {
  transform: none !important;
  transition: filter .22s ease, box-shadow .22s ease !important;
}
.card-tile:hover .card-inner {
  filter: brightness(1.045) saturate(1.06) drop-shadow(0 12px 18px rgba(21, 91, 216, .18)) !important;
}
.card-tile:hover .face {
  box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 0 16px rgba(255,120,189,.22), 0 8px 20px rgba(21,91,216,.16) !important;
}
.card-tile:hover:after {
  content: "" !important;
  position: absolute;
  inset: -5px;
  border-radius: 18px;
  background: linear-gradient(115deg, transparent 0 28%, rgba(255,255,255,.44), transparent 58%);
  pointer-events: none;
  transform: translateX(-120%);
  animation: v9CardSweep 1.05s ease both;
  z-index: 3;
}
@keyframes v9CardSweep { to { transform: translateX(120%); } }

/* Keep reveal buttons anchored. They glow instead of jumping away. */
.tiny-reveal,
.tiny-reveal:hover {
  bottom: 9px !important;
  transform: translateX(-50%) !important;
}
.tiny-reveal {
  min-width: 92px;
  padding: 10px 16px !important;
  border: 2px solid rgba(255,255,255,.72) !important;
  background: linear-gradient(180deg,#ff9bd1,#ff43a5) !important;
  box-shadow: 0 8px 18px rgba(255,79,167,.25), 0 0 0 0 rgba(255,120,189,.0) !important;
}
.tiny-reveal:hover,
.tiny-reveal:focus-visible {
  box-shadow: 0 0 0 6px rgba(255,120,189,.18), 0 10px 24px rgba(255,79,167,.35), 0 0 18px rgba(255,255,255,.8) !important;
  filter: brightness(1.06) saturate(1.08);
}
.is-hidden .tiny-reveal {
  animation: v9RevealButtonPulse 2.4s ease-in-out infinite;
}
@keyframes v9RevealButtonPulse {
  50% { box-shadow: 0 0 0 7px rgba(255,120,189,.14), 0 10px 25px rgba(255,79,167,.30), 0 0 24px rgba(255,255,255,.58); }
}

/* Binder card faces: front face is always the visible image/back image chosen by JS. */
.card-tile .front { transform: none !important; z-index: 1; }
.card-tile .back { display: none !important; }


.rarity-epic .face,
.rarity-epic.collection-card,
.rarity-epic.fav-spot {
  box-shadow: 0 0 0 2px rgba(171,121,255,.40), 0 10px 24px rgba(125,96,220,.12) !important;
}

.rarity-legendary .face,
.rarity-legendary.collection-card,
.rarity-legendary.fav-spot {
  box-shadow: 0 0 0 2px rgba(255,218,77,.96), 0 0 14px rgba(255,223,96,.62), 0 0 32px rgba(255,171,215,.20), 0 15px 30px rgba(206,138,0,.20) !important;
}


/* V9 clean reveal overlay */
#revealOverlay.open.clean-open {
  display: grid !important;
  place-items: center;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,246,255,.22), transparent 30%),
    radial-gradient(circle at 50% 65%, rgba(255,120,189,.18), transparent 36%),
    rgba(8, 20, 72, .72) !important;
  backdrop-filter: blur(10px);
}
.reveal-clean {
  position: relative;
  width: min(560px, 92vw);
  min-height: min(720px, 90vh);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  text-align: center;
  color: white;
  border-radius: 34px;
  overflow: hidden;
  padding: 28px 24px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(145deg, rgba(75,151,255,.92), rgba(106,74,184,.92) 54%, rgba(255,126,196,.78));
  border: 2px solid rgba(255,255,255,.62);
  box-shadow: 0 28px 90px rgba(5, 20, 72, .42), inset 0 0 80px rgba(255,255,255,.15);
  isolation: isolate;
}
.reveal-clean:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.82) 0 1.4px, transparent 2.5px);
  background-size: 54px 54px;
  opacity: .32;
  animation: twinkle 5.5s ease-in-out infinite;
  z-index: -2;
}
.reveal-clean:after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.26), rgba(255,207,241,.18) 36%, transparent 68%);
  filter: blur(6px);
  z-index: -1;
  transform: scale(.75);
  opacity: .55;
  transition: transform .55s ease, opacity .55s ease;
}
.reveal-clean.phase-charge:after { transform: scale(1); opacity: .82; }
.reveal-clean.phase-burst:after { transform: scale(1.18); opacity: 1; }
.reveal-clean-skip {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  background: linear-gradient(180deg, #ff9bd1, #ff43a5);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(255,79,167,.26);
}
.reveal-clean-card {
  position: relative;
  width: min(330px, 62vw);
  aspect-ratio: 2.5 / 3.5;
  perspective: 1100px;
  filter: drop-shadow(0 25px 34px rgba(0,0,0,.34));
  animation: v9RevealFloat 2.8s ease-in-out infinite;
}
.reveal-clean-card.charge { animation: v9RevealFloat 2.8s ease-in-out infinite, v9CardCharge .85s ease-in-out infinite; }
.reveal-clean-card.burst { animation: v9RevealFloat 2.8s ease-in-out infinite, v9CleanBurst .7s ease both; }
.reveal-clean-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.2,.75,.18,1);
}
.reveal-clean-card.flipped .reveal-clean-inner { transform: rotateY(180deg); }
.reveal-clean-face {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  overflow: hidden;
  backface-visibility: hidden;
  box-shadow: 0 0 0 4px rgba(255,255,255,.42), 0 0 28px rgba(255,255,255,.24);
}
.reveal-clean-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reveal-clean-front { transform: rotateY(180deg); }
.reveal-clean-copy { position: relative; z-index: 2; }
.reveal-clean-title {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.02;
  text-shadow: 0 3px 18px rgba(0,0,0,.26);
}
.reveal-clean-sub {
  margin: 8px 0 0;
  color: #ffe7f4;
  font-weight: 900;
  text-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.reveal-clean-stars span {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px #fff, 0 0 30px #ff8ac8;
  opacity: .85;
  animation: v9StarDrift 3.2s ease-in-out infinite;
}
.reveal-clean-stars span:nth-child(1){left:12%;top:22%;animation-delay:.1s}
.reveal-clean-stars span:nth-child(2){right:15%;top:18%;animation-delay:.4s;background:#ffe983}
.reveal-clean-stars span:nth-child(3){left:18%;bottom:25%;animation-delay:.8s;background:#8ee5ff}
.reveal-clean-stars span:nth-child(4){right:18%;bottom:28%;animation-delay:1.1s;background:#ff9bd1}
.reveal-clean-stars span:nth-child(5){left:50%;top:12%;animation-delay:1.4s;background:#fff6b9}
.reveal-clean.rarity-legendary .reveal-clean-card:before {
  content: "";
  position: absolute;
  inset: -28px;
  border-radius: 34px;
  background: conic-gradient(from 0deg, transparent, rgba(255,232,99,.56), rgba(255,255,255,.72), rgba(255,169,215,.24), rgba(255,232,99,.48), transparent);
  filter: blur(18px);
  animation: spin 7.5s linear infinite;
  z-index: -1;
}
.reveal-clean.rarity-epic .reveal-clean-card:before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 30px;
  background: linear-gradient(120deg, rgba(174,121,255,.22), rgba(255,255,255,.32), rgba(112,220,255,.22));
  filter: blur(14px);
  animation: cleanShine 5.8s ease-in-out infinite;
  z-index: -1;
}
@keyframes v9RevealFloat { 50% { transform: translateY(-9px); } }
@keyframes v9CardCharge { 50% { filter: drop-shadow(0 0 28px rgba(255,255,255,.82)); transform: scale(1.025); } }
@keyframes v9CleanBurst { 0%{transform:scale(1)} 48%{transform:scale(1.08); filter:drop-shadow(0 0 34px rgba(255,225,117,.95))} 100%{transform:scale(1)} }
@keyframes v9StarDrift { 50% { transform: translateY(-14px) scale(1.24); opacity: .55; } }

@media (max-height: 820px) and (min-width: 1000px) {
  .reveal-clean { min-height: min(620px, 90vh); padding: 22px; }
  .reveal-clean-card { width: min(290px, 56vw); }
}

/* V10 reveal refinements: slower, cleaner, click-to-skip, X-to-close */
#revealOverlay.open.clean-open {
  display: grid !important;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.28), transparent 24%),
    radial-gradient(circle at 50% 64%, rgba(255,120,189,.20), transparent 34%),
    radial-gradient(circle at 18% 20%, rgba(114,207,255,.24), transparent 30%),
    linear-gradient(135deg, rgba(17,48,140,.70), rgba(96,64,184,.62) 55%, rgba(255,129,198,.40)) !important;
  backdrop-filter: blur(13px) saturate(1.16);
}
.reveal-clean {
  width: min(660px, 94vw) !important;
  min-height: min(790px, 94vh) !important;
  gap: 22px !important;
  padding: 42px 28px 34px !important;
  border-radius: 38px !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.28), transparent 28%),
    radial-gradient(circle at 50% 62%, rgba(255,228,126,.16), transparent 34%),
    linear-gradient(145deg, rgba(72,168,255,.56), rgba(109,78,194,.62) 50%, rgba(255,118,190,.50)) !important;
  border: 2px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 30px 95px rgba(5,20,72,.38), inset 0 0 92px rgba(255,255,255,.16) !important;
}
.reveal-clean:before {
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1.5px, transparent 2.8px),
    radial-gradient(circle, rgba(255,222,108,.8) 0 1px, transparent 2.5px) !important;
  background-size: 62px 62px, 96px 96px !important;
  opacity: .42 !important;
  animation: revealStarPan 9s linear infinite !important;
}
.reveal-clean:after {
  width: 500px !important;
  height: 500px !important;
  background: radial-gradient(circle, rgba(255,255,255,.50), rgba(255,231,246,.24) 34%, rgba(255,209,91,.10), transparent 70%) !important;
  filter: blur(10px) !important;
}
.reveal-clean-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 6;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg,#ff9bd1,#ff43a5);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(255,79,167,.30), inset 0 1px 0 rgba(255,255,255,.48);
}
.reveal-clean-close:hover { transform: scale(1.06); filter: brightness(1.08); }
.reveal-clean-skip { display: none !important; }
.reveal-clean-card {
  width: min(355px, 64vw) !important;
  animation: v10CardFloat 3.8s ease-in-out infinite !important;
  filter: drop-shadow(0 30px 42px rgba(13,24,92,.36)) !important;
}
.reveal-clean-card.charge {
  animation: v10CardFloat 3.8s ease-in-out infinite, v10ChargePulse 1.15s ease-in-out infinite !important;
}
.reveal-clean-card.burst {
  animation: v10CardFloat 3.8s ease-in-out infinite, v10MagicBurst 1.25s ease both !important;
}
.reveal-clean-card.revealed {
  animation: v10CardFloat 3.8s ease-in-out infinite !important;
}
.reveal-clean-inner { transition: transform 1.25s cubic-bezier(.18,.82,.16,1) !important; }
.reveal-clean-face {
  border-radius: 26px !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,.52), 0 0 34px rgba(255,255,255,.24), 0 28px 60px rgba(0,0,0,.26) !important;
}
.reveal-clean-title {
  max-width: 620px;
  margin: 0 auto !important;
  color: #fff;
  font-size: clamp(1.85rem, 5.2vw, 3.45rem) !important;
  letter-spacing: .02em;
  text-shadow: 0 3px 14px rgba(5,20,72,.34), 0 0 28px rgba(255,120,189,.42) !important;
}
.reveal-clean-copy .eyebrow,
.reveal-clean-sub { display: none !important; }
.reveal-magic-bg span {
  position: absolute;
  inset: auto;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.28), rgba(255,120,189,.13), transparent 70%);
  filter: blur(10px);
  animation: revealOrb 5s ease-in-out infinite;
  pointer-events: none;
}
.reveal-magic-bg span:nth-child(1){left:3%;top:18%;animation-delay:.1s}
.reveal-magic-bg span:nth-child(2){right:4%;top:24%;background:radial-gradient(circle,rgba(255,232,105,.24),rgba(114,207,255,.14),transparent 70%);animation-delay:1s}
.reveal-magic-bg span:nth-child(3){left:34%;bottom:3%;background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,120,189,.17),transparent 72%);animation-delay:2s}
.reveal-clean-stars span {
  width: 9px !important;
  height: 9px !important;
  box-shadow: 0 0 16px #fff, 0 0 34px #ff8ac8 !important;
  animation: v10StarRise 4.8s ease-in-out infinite !important;
}
.reveal-clean-stars span:nth-child(6){left:72%;top:56%;animation-delay:1.7s;background:#fff6b9}
.reveal-clean-stars span:nth-child(7){left:30%;top:52%;animation-delay:2.1s;background:#9eeeff}
.reveal-clean.phase-charge .reveal-clean-title { animation: v10TitleGlow 1.15s ease-in-out infinite; }
.reveal-clean.phase-burst .reveal-clean-title { animation: v10ReleasePop 1.2s ease both; }
.reveal-clean.phase-revealed .reveal-clean-title { animation: v10TitleGlow 2.6s ease-in-out infinite; }
.reveal-clean.rarity-legendary .reveal-clean-card:before {
  inset: -36px !important;
  border-radius: 42px !important;
  background: conic-gradient(from 0deg, transparent, rgba(255,232,99,.66), rgba(255,255,255,.90), rgba(114,207,255,.34), rgba(255,120,189,.30), rgba(255,232,99,.66), transparent) !important;
  filter: blur(22px) !important;
  animation: spin 8.5s linear infinite !important;
}
.reveal-clean.rarity-epic .reveal-clean-card:before {
  inset: -24px !important;
  border-radius: 36px !important;
  background: linear-gradient(120deg, rgba(174,121,255,.34), rgba(255,255,255,.34), rgba(112,220,255,.28), rgba(255,149,210,.24)) !important;
  filter: blur(18px) !important;
  animation: cleanShine 5.8s ease-in-out infinite !important;
}
#revealOverlay.is-finished .reveal-clean { cursor: default; }
#revealOverlay.is-animating .reveal-clean { cursor: pointer; }
@keyframes revealStarPan { from{background-position:0 0, 0 0} to{background-position:0 -124px, 96px -96px} }
@keyframes v10CardFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes v10ChargePulse { 50%{filter:drop-shadow(0 0 36px rgba(255,255,255,.95)) drop-shadow(0 0 26px rgba(255,120,189,.55)); transform:scale(1.025)} }
@keyframes v10MagicBurst { 0%{transform:scale(1)} 40%{transform:scale(1.075); filter:drop-shadow(0 0 48px rgba(255,236,122,.96))} 100%{transform:scale(1)} }
@keyframes v10StarRise { 0%,100%{transform:translateY(0) scale(1);opacity:.78} 50%{transform:translateY(-22px) scale(1.25);opacity:.42} }
@keyframes revealOrb { 50%{transform:translateY(-18px) scale(1.12);opacity:.65} }
@keyframes v10TitleGlow { 50%{filter:drop-shadow(0 0 18px rgba(255,255,255,.72))} }
@keyframes v10ReleasePop { 0%{transform:scale(.96);opacity:.9} 42%{transform:scale(1.065);filter:drop-shadow(0 0 18px rgba(255,255,255,.85))} 100%{transform:scale(1);opacity:1} }
@media (max-height: 820px) and (min-width: 1000px) {
  .reveal-clean { min-height: min(680px, 92vh) !important; padding: 34px 22px 26px !important; }
  .reveal-clean-card { width: min(310px, 56vw) !important; }
}

/* V11 polish: navigation labels, reveal presentation, binder spacing */
.binder-meta{
  display:flex!important;
  align-items:center;
  gap:18px!important;
  flex-wrap:wrap;
  padding:0 2px 8px!important;
}

/* Magical-girl reveal: fade/transform instead of hard flip */
.reveal-clean{
  width:min(690px,94vw)!important;
  min-height:min(820px,94vh)!important;
}
.reveal-clean-title{
  white-space:nowrap!important;
  font-size:clamp(1rem,3.4vw,1.7rem)!important;
  letter-spacing:.01em!important;
  margin-top:2px!important;
  text-align:center!important;
}
.reveal-clean-inner{
  transform:none!important;
  transition:none!important;
}
.reveal-clean-face{
  transition:opacity 1.25s ease, transform 1.25s cubic-bezier(.2,.9,.15,1), filter 1.25s ease!important;
}
.reveal-clean-back{
  opacity:1;
  transform:scale(1) rotate(0deg)!important;
}
.reveal-clean-front{
  transform:scale(.88) rotate(-2deg)!important;
  opacity:0;
  filter:blur(12px) brightness(1.45) saturate(1.2);
}
.reveal-clean-card.flipped .reveal-clean-back{
  opacity:0;
  transform:scale(1.12) rotate(2deg)!important;
  filter:blur(10px) brightness(1.6);
}
.reveal-clean-card.flipped .reveal-clean-front{
  opacity:1;
  transform:scale(1) rotate(0deg)!important;
  filter:none;
}
.reveal-clean.phase-burst .reveal-clean-card::after{
  content:"";
  position:absolute;
  inset:-46px;
  border-radius:42px;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.95),rgba(255,236,148,.55) 18%,rgba(255,121,198,.28) 36%,transparent 62%),
    conic-gradient(from 180deg,transparent,rgba(255,255,255,.9),rgba(134,221,255,.55),rgba(255,158,214,.58),transparent);
  mix-blend-mode:screen;
  animation:v11MagicBloom 1.45s ease both;
  z-index:4;
}
.reveal-card-info{
  display:none;
  width:min(560px,90vw);
  margin:12px auto 0;
  padding:15px 18px;
  border-radius:22px;
  color:#14348f;
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(234,248,255,.78),rgba(255,228,242,.72));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 44px rgba(10,35,110,.20);
  text-align:left;
}
.reveal-card-info h3{
  margin:0 0 8px;
  font-size:clamp(1.25rem,3vw,1.85rem);
  color:#0b3193;
}
.reveal-card-info p{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin:5px 0;
  color:#3158a4;
  font-weight:800;
}
.reveal-card-info .description{
  display:block;
  margin-top:10px;
  line-height:1.35;
}
#revealOverlay.is-finished .reveal-card-info{
  display:block;
  animation:v11InfoIn .45s ease both;
}
#revealOverlay.is-finished .reveal-clean-title{
  opacity:.9;
  font-size:clamp(.92rem,2.4vw,1.22rem)!important;
}
@keyframes v11MagicBloom{
  0%{opacity:0;transform:scale(.45) rotate(0deg);filter:blur(14px)}
  45%{opacity:1;transform:scale(1.08) rotate(45deg);filter:blur(2px)}
  100%{opacity:0;transform:scale(1.35) rotate(90deg);filter:blur(20px)}
}
@keyframes v11InfoIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

@media(max-height:820px) and (min-width:1000px){
  .reveal-clean{min-height:min(730px,94vh)!important;padding:30px 22px 24px!important;gap:14px!important}
  .reveal-clean-card{width:min(300px,52vw)!important}
  .reveal-card-info{font-size:.88rem;padding:12px 15px}
}


.reveal-clean-title{
  font-size:clamp(1rem,2.2vw,1.55rem)!important;
  white-space:nowrap!important;
  letter-spacing:.04em!important;
  margin-top:8px!important;
}
.reveal-card-info{
  margin-top:8px!important;
  display:grid!important;
  place-items:center!important;
  gap:2px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .55s ease, transform .55s ease;
}
.reveal-card-info h3{margin:0!important;font-size:clamp(1.25rem,3vw,2rem)!important;color:#fff!important;text-shadow:0 3px 18px rgba(235,84,174,.55),0 0 10px rgba(255,255,255,.75)}
.reveal-card-info p{margin:0!important;font-weight:900!important;color:#fff7ff!important;text-shadow:0 2px 10px rgba(34,67,152,.45)}
#revealOverlay.is-finished .reveal-card-info{opacity:1;transform:translateY(0)}

/* Magical girl reveal: crossfade bloom instead of mechanical flip */
.reveal-clean-inner{transform:none!important;transition:none!important;}
.reveal-clean-face{backface-visibility:visible!important;transform:none!important;transition:opacity .85s ease, filter .85s ease, transform .85s cubic-bezier(.18,.82,.16,1)!important;}
.reveal-clean-back{opacity:1;filter:brightness(.9) saturate(1.05);}
.reveal-clean-front{opacity:0;transform:scale(.96)!important;filter:brightness(1.55) blur(8px) saturate(1.25);}
.reveal-clean-card.flipped .reveal-clean-back{opacity:0;transform:scale(1.04)!important;filter:brightness(2.3) blur(16px);}
.reveal-clean-card.flipped .reveal-clean-front{opacity:1;transform:scale(1)!important;filter:brightness(1) blur(0) saturate(1.05);}
.reveal-clean.phase-burst .reveal-clean-card{animation:v12RevealBloom .95s ease both!important;}
@keyframes v12RevealBloom{0%{transform:scale(1)}35%{transform:scale(1.08);filter:brightness(1.45) saturate(1.3)}100%{transform:scale(1);filter:brightness(1)}}

/* Distinct rarity reveal flavors */
.reveal-clean.rarity-common:before{background:radial-gradient(circle,rgba(150,219,255,.42),transparent 58%)!important;}
.reveal-clean.rarity-uncommon:before{background:radial-gradient(circle,rgba(128,255,205,.42),transparent 58%)!important;}
.reveal-clean.rarity-rare:before{background:radial-gradient(circle,rgba(120,174,255,.52),transparent 58%)!important;}
.reveal-clean.rarity-epic:before{background:radial-gradient(circle,rgba(198,135,255,.54),transparent 58%)!important;}
.reveal-clean.rarity-legendary:before{background:radial-gradient(circle,rgba(255,224,87,.72),rgba(255,142,211,.28),transparent 64%)!important;}
.reveal-clean.rarity-common .reveal-clean-stars span{background:#8ee5ff!important;box-shadow:0 0 16px #8ee5ff!important;}
.reveal-clean.rarity-uncommon .reveal-clean-stars span{background:#8effcf!important;box-shadow:0 0 16px #8effcf!important;}
.reveal-clean.rarity-rare .reveal-clean-stars span{background:#80adff!important;box-shadow:0 0 18px #80adff!important;}
.reveal-clean.rarity-epic .reveal-clean-stars span{background:#d9a2ff!important;box-shadow:0 0 20px #d9a2ff!important;}
.reveal-clean.rarity-legendary .reveal-clean-stars span{background:#ffe16b!important;box-shadow:0 0 24px #ffe16b!important;}


.slot,
.card-inner,
.face,
.preview-card,
.preview-inner,
.full-card-wrap,
.full-inner,
.collection-card,
.fav-spot { overflow: hidden; }

/* Hover should only affect the hovered card, not sweep across neighbors */
.card-tile:hover .card-inner {
  transform: translateY(-5px) scale(1.025) !important;
  filter: drop-shadow(0 16px 22px rgba(8,39,125,.22)) brightness(1.04) !important;
}
.card-tile:hover .face.front,
.card-tile:hover .face.back {
  box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 0 18px rgba(255,120,189,.28), 0 10px 24px rgba(21,91,216,.18) !important;
}


/* Explicit 3D face directions so Flip always shows the actual card back, never a mirrored front */
.preview-card .face.front,
.full-card-wrap .face.front,
.card-inner .face.front { transform: rotateY(0deg) !important; }
.preview-card .face.back,
.full-card-wrap .face.back,
.card-inner .face.back { transform: rotateY(180deg) !important; }
.preview-card.flipped .preview-inner { transform: rotateY(180deg) !important; }
.preview-card.flipped:hover .preview-inner { transform: rotateY(180deg) scale(1.01) !important; }
.full-card-wrap.flipped .full-inner { transform: rotateY(180deg) !important; }

/* Stable reveal typography: no sudden font resizing or layout jumps */
.reveal-clean-copy { min-height: 86px; display:grid; place-items:center; gap:4px; }
.reveal-clean-title {
  font-size:clamp(1rem,2.2vw,1.55rem) !important;
  line-height:1.15 !important;
  min-height:1.25em !important;
  margin:8px 0 0 !important;
  opacity:1;
  transition:opacity .55s ease, transform .55s ease !important;
}
#revealOverlay.is-finished .reveal-clean-title {
  opacity:0 !important;
  transform:translateY(-6px) scale(.98) !important;
  font-size:clamp(1rem,2.2vw,1.55rem) !important;
}
.reveal-card-info {
  min-height:54px !important;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .55s ease, transform .55s ease !important;
}
#revealOverlay.is-finished .reveal-card-info { opacity:1 !important; transform:translateY(-8px) !important; }
.reveal-card-info h3 { font-size:clamp(1.25rem,3vw,2rem) !important; line-height:1.05 !important; }
.reveal-card-info p { display:block !important; font-size:clamp(.9rem,1.8vw,1.1rem) !important; }

/* V14 refinements */
body.series-select #globalSearch { display: none !important; }
body.series-select .top-actions { justify-content: flex-end; }

.collection-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.collection-tools .btn { min-width: 150px; }

/* Hover: only the card itself lights up, no sweeping light onto nearby cards. */
.card-tile:hover:after,
.card-tile:focus-visible:after { display: none !important; content: none !important; animation: none !important; }
.card-tile:hover .face,
.card-tile:focus-visible .face {
  box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 0 18px rgba(255,126,196,.34), 0 12px 22px rgba(37,86,190,.16) !important;
}
.card-tile:hover .card-inner,
.card-tile:focus-visible .card-inner {
  filter: brightness(1.055) saturate(1.065) drop-shadow(0 10px 18px rgba(37,86,190,.18)) !important;
}

/* V15: restore controlled 3D hover without lighting adjacent cards */
.card-tile {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glow-x: 50%;
  --glow-y: 22%;
}
.card-tile .card-inner {
  transition: transform .18s ease, filter .18s ease !important;
  will-change: transform, filter;
}
.card-tile:hover .card-inner,
.card-tile:focus-visible .card-inner {
  transform: translateY(-8px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.045) !important;
  filter: brightness(1.06) saturate(1.08) drop-shadow(0 18px 24px rgba(12,52,150,.24)) !important;
}
.card-tile:hover .face::after,
.card-tile:focus-visible .face::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255,255,255,.42), rgba(255,255,255,.12) 22%, transparent 48%);
  mix-blend-mode: screen;
  animation: none !important;
}
.card-tile:hover::after,
.card-tile:focus-visible::after {
  content: none !important;
  display: none !important;
}


@keyframes starlightStandardHolo {
  0%, 100% { background-position: 0 0, 16px 18px, 10px 42px, 0 0, 50% 108%; }
  50% { background-position: 5px 7px, 10px 10px, 16px 34px, 0 0, 50% -8%; }
}

@keyframes starlightHoloBreath {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.16) saturate(1.18); }
}
@keyframes starlightHoloTexture {
  0%, 100% { opacity: .22; transform: scale(1); }
  50% { opacity: .42; transform: scale(1.012); }
}

/* V15: reveal end card info: name, series, then rarity on its own line. */
.reveal-card-info { min-height: 78px !important; }
.reveal-card-info h3 { margin: 0 0 2px !important; }
.reveal-info-series,
.reveal-info-rarity {
  margin: 2px 0 0 !important;
  display: block !important;
  line-height: 1.18 !important;
}
.reveal-info-rarity {
  width: fit-content;
  margin-inline: auto !important;
  padding: 4px 12px;
  border-radius: 999px;
  color: #8a5500;
  background: linear-gradient(180deg,#fff2bf,#ffd76f);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}


/* Hover: keep the interactive 3D tilt, remove all zoom and mouse-follow glow. */
.card-tile:hover .card-inner,
.card-tile:focus-visible .card-inner {
  transform: translateY(-6px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1) !important;
  filter: brightness(1.065) saturate(1.075) drop-shadow(0 16px 22px rgba(12,52,150,.24)) !important;
}
.card-tile:hover .face::after,
.card-tile:focus-visible .face::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
.card-tile:hover .face,
.card-tile:focus-visible .face {
  box-shadow:
    0 0 0 2px rgba(255,255,255,.96),
    0 0 18px rgba(255,126,196,.34),
    0 0 28px rgba(126,214,255,.22),
    0 14px 24px rgba(37,86,190,.18) !important;
}

/* Flip behavior: show the actual card back image, never a mirrored front. */
.preview-inner,
.full-inner,
.card-inner {
  transform-style: preserve-3d !important;
}
.preview-card .face,
.full-card-wrap .face,
.card-inner .face {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
.preview-card .face.front,
.full-card-wrap .face.front,
.card-inner .face.front {
  transform: rotateY(0deg) !important;
  opacity: 1 !important;
  z-index: 2 !important;
}
.preview-card .face.back,
.full-card-wrap .face.back,
.card-inner .face.back {
  transform: rotateY(180deg) !important;
  opacity: 1 !important;
  z-index: 1 !important;
}
.preview-card.flipped .preview-inner,
.preview-card.flipped:hover .preview-inner,
.full-card-wrap.flipped .full-inner,
.card-inner.flipped {
  transform: rotateY(180deg) !important;
}
.preview-card.flipped .face.back,
.full-card-wrap.flipped .face.back,
.card-inner.flipped .face.back {
  z-index: 3 !important;
}
.preview-card .face.back img,
.full-card-wrap .face.back img,
.card-inner .face.back img {
  transform: none !important;
}


@keyframes v16HoloFloat {
  0%, 100% { background-position: 0 0, 18px 16px, 12px 40px, 50% 112%; }
  50% { background-position: 7px 8px, 10px 8px, 18px 32px, 50% -10%; }
}
@keyframes v16HoloBreath {
  0%, 100% { opacity: .20; }
  50% { opacity: .30; }
}

@keyframes v16LegendaryBreath {
  0%, 100% { opacity: .34; }
  50% { opacity: .48; }
}


/* Card hover: 3D tilt returns, but no zoom and no mouse-follow glare. */
.card-tile .card-inner {
  transition: transform .24s ease, filter .24s ease !important;
  transform-style: preserve-3d !important;
}
.card-tile:hover .card-inner {
  transform: translateY(-6px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1) !important;
  filter: drop-shadow(0 16px 20px rgba(8,39,125,.22)) drop-shadow(0 0 14px rgba(255,120,189,.28)) !important;
}
.card-tile:hover .face {
  box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 0 18px rgba(255,120,189,.30), 0 10px 24px rgba(21,91,216,.16) !important;
}
.card-tile:hover .face::after,
.card-tile:hover .front::after,
.card-tile:hover .card-inner::before {
  content: none !important;
  display: none !important;
}
.card-tile.tap-tilt .card-inner {
  transform: rotateX(5deg) rotateY(10deg) scale(1) !important;
}
.preview-card:hover .preview-inner {
  transform: rotateX(4deg) rotateY(-5deg) scale(1) !important;
}
.preview-card.flipped:hover .preview-inner {
  transform: rotateY(180deg) rotateX(4deg) scale(1) !important;
}

/* Back faces must show the actual card back, never a mirrored front. */
.card-inner, .preview-inner, .full-inner {
  transform-style: preserve-3d !important;
}
.card-inner .face,
.preview-inner .face,
.full-inner .face {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
.card-inner .face.front,
.preview-inner .face.front,
.full-inner .face.front {
  transform: rotateY(0deg) !important;
}
.card-inner .face.back,
.preview-inner .face.back,
.full-inner .face.back {
  transform: rotateY(180deg) !important;
}
.card-inner .face.back img,
.preview-inner .face.back img,
.full-inner .face.back img {
  transform: none !important;
  filter: none !important;
}


.face.front,
.preview-card .face.front,
.full-card-wrap .face.front,
.reveal-clean-front,
.collection-image,
.fav-image {
  position: relative !important;
  overflow: hidden !important;
}
.collection-image,
.fav-image {
  display: block !important;
  border-radius: 14px !important;
  aspect-ratio: 2.5 / 3.5 !important;
}
.collection-image img,
.fav-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: inherit !important;
}


@keyframes v18StandardHolo {
  0%,100% { background-position: 0 0, 14px 18px, 20px 46px, 50% 112%; }
  50% { background-position: 8px 10px, 6px 8px, 26px 35px, 50% -12%; }
}
@keyframes v18HoloBreath {
  0%,100% { opacity: .24; }
  50% { opacity: .34; }
}
@keyframes v18LegendaryHolo {
  0%,100% { background-position: 0 0, 12px 15px, 7px 21px, 20px 4px, 0% 45%, 50% 112%; }
  50% { background-position: 14px 8px, 2px 28px, 18px 12px, 7px 18px, 100% 55%, 50% -14%; }
}
@keyframes v18LegendaryBreath {
  0%,100% { opacity: .46; }
  50% { opacity: .60; }
}


/* Rarity filter colors inspired by TCG rarity vibes. */
select[data-rarity] {
  font-weight: 900 !important;
  border-width: 2px !important;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
select[data-rarity].rarity-select-allrarities {
  background: linear-gradient(180deg, #ffffff, #eef7ff) !important;
  border-color: #9fc8ff !important;
  color: #0d3f9c !important;
}
select[data-rarity].rarity-select-common {
  background: linear-gradient(180deg, #ffffff, #f2f5f8) !important;
  border-color: #aeb8c5 !important;
  color: #4c5b6b !important;
}
select[data-rarity].rarity-select-uncommon {
  background: linear-gradient(180deg, #f8fff8, #dff7e8) !important;
  border-color: #52b96c !important;
  color: #16723a !important;
}
select[data-rarity].rarity-select-rare {
  background: linear-gradient(180deg, #f7fbff, #dcecff) !important;
  border-color: #3b86ff !important;
  color: #1459c7 !important;
  box-shadow: 0 0 0 3px rgba(59,134,255,.10) !important;
}
select[data-rarity].rarity-select-epic {
  background: linear-gradient(180deg, #fbf8ff, #efe2ff) !important;
  border-color: #9a63ff !important;
  color: #6630c9 !important;
  box-shadow: 0 0 0 3px rgba(154,99,255,.12) !important;
}
select[data-rarity].rarity-select-legendary {
  background: linear-gradient(180deg, #fffaf0, #ffe8a6) !important;
  border-color: #d99b16 !important;
  color: #8a5600 !important;
  box-shadow: 0 0 0 3px rgba(255,200,74,.22), 0 0 18px rgba(255,200,74,.22) !important;
}
select[data-rarity] option[value="Common"], select[data-rarity] option:nth-child(2) { color:#4c5b6b; }
select[data-rarity] option[value="Uncommon"], select[data-rarity] option:nth-child(3) { color:#16723a; }
select[data-rarity] option[value="Rare"], select[data-rarity] option:nth-child(4) { color:#1459c7; }
select[data-rarity] option[value="Epic"], select[data-rarity] option:nth-child(5) { color:#6630c9; }
select[data-rarity] option[value="Legendary"], select[data-rarity] option:nth-child(6) { color:#8a5600; }


.face.front,
.preview-card .face.front,
.full-card-wrap .face.front,
.collection-image,
.fav-image,
.reveal-clean-front {
  overflow: hidden !important;
  position: relative !important;
}

/* Flip hardening: the back face is the card-back image and never a mirrored front. */
.preview-card .face.back,
.full-card-wrap .face.back,
.card-inner .face.back {
  background: #fff !important;
}
.preview-card .face.back img,
.full-card-wrap .face.back img,
.card-inner .face.back img {
  content: url("../site_assets/StarlightCard_Back_NewLogo.png") !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}
.preview-card.flipped .face.front,
.full-card-wrap.flipped .face.front,
.card-inner.flipped .face.front {
  opacity: 0 !important;
}
.preview-card.flipped .face.back,
.full-card-wrap.flipped .face.back,
.card-inner.flipped .face.back {
  opacity: 1 !important;
}
.preview-card:not(.flipped) .face.back,
.full-card-wrap:not(.flipped) .face.back {
  opacity: 0 !important;
}
.preview-card:not(.flipped) .face.front,
.full-card-wrap:not(.flipped) .face.front {
  opacity: 1 !important;
}

/* Hover: keep 3D tilt and glow, but no zoom and no moving mouse glare. */
.card-tile:hover .card-inner,
.card-tile:focus-visible .card-inner {
  transform: translateY(-6px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1) !important;
  filter: drop-shadow(0 16px 20px rgba(8,39,125,.22)) drop-shadow(0 0 18px rgba(255,120,189,.34)) !important;
}
.card-tile:hover .face::after,
.card-tile:hover .front::after,
.card-tile:hover .card-inner::before {
  content: none !important;
  display: none !important;
}


@keyframes v19LegendaryBreath {
  0%,100% { opacity:.52; }
  50% { opacity:.70; }
}
@keyframes v19GoldTexture {
  0%,100% { background-position: 0 0, 0 0, 0 0; opacity:.32; }
  50% { background-position: 0 0, 14px 12px, -12px 16px; opacity:.48; }
}


/* =========================================================
   V21 rarity colors + card-back flip hardening
   ========================================================= */
:root{
  --rarity-common-bg:#f6f7fb;
  --rarity-common-border:#cfd6df;
  --rarity-common-text:#5b6572;
  --rarity-uncommon-bg:#eaf5ff;
  --rarity-uncommon-border:#76bfff;
  --rarity-uncommon-text:#1267b9;
  --rarity-rare-bg:#fff0df;
  --rarity-rare-border:#ffb15c;
  --rarity-rare-text:#bf6414;
  --rarity-epic-bg:#ffe6f4;
  --rarity-epic-border:#ff9bd3;
  --rarity-epic-text:#d62e8a;
  --rarity-legendary-bg:#fff6bf;
  --rarity-legendary-border:#ffd21f;
  --rarity-legendary-text:#9a6a00;
}

/* Rarity text/chips anywhere rarity is displayed. */
.rarity-text,
.pill.rarity-pill,
.hero-pill.rarity-pill,
.reveal-info-rarity{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  border-radius:999px;
  padding:.24rem .62rem;
  font-weight:900;
  letter-spacing:.02em;
  border:2px solid transparent;
  line-height:1.1;
  text-shadow:none!important;
}
.rarity-text.rarity-common,.pill.rarity-common,.hero-pill.rarity-common,.reveal-info-rarity.rarity-common{background:var(--rarity-common-bg)!important;border-color:var(--rarity-common-border)!important;color:var(--rarity-common-text)!important;}
.rarity-text.rarity-uncommon,.pill.rarity-uncommon,.hero-pill.rarity-uncommon,.reveal-info-rarity.rarity-uncommon{background:var(--rarity-uncommon-bg)!important;border-color:var(--rarity-uncommon-border)!important;color:var(--rarity-uncommon-text)!important;}
.rarity-text.rarity-rare,.pill.rarity-rare,.hero-pill.rarity-rare,.reveal-info-rarity.rarity-rare{background:var(--rarity-rare-bg)!important;border-color:var(--rarity-rare-border)!important;color:var(--rarity-rare-text)!important;}
.rarity-text.rarity-epic,.pill.rarity-epic,.hero-pill.rarity-epic,.reveal-info-rarity.rarity-epic{background:var(--rarity-epic-bg)!important;border-color:var(--rarity-epic-border)!important;color:var(--rarity-epic-text)!important;}
.rarity-text.rarity-legendary,.pill.rarity-legendary,.hero-pill.rarity-legendary,.reveal-info-rarity.rarity-legendary{background:linear-gradient(180deg,#fffdf0,#ffe66d)!important;border-color:var(--rarity-legendary-border)!important;color:var(--rarity-legendary-text)!important;box-shadow:0 0 12px rgba(255,210,31,.35)!important;}

/* Rarity filter dropdown colors requested. */
select[data-rarity].rarity-select-common{background:linear-gradient(180deg,#fff,#f4f6f9)!important;border-color:var(--rarity-common-border)!important;color:var(--rarity-common-text)!important;}
select[data-rarity].rarity-select-uncommon{background:linear-gradient(180deg,#f9fdff,#e5f4ff)!important;border-color:var(--rarity-uncommon-border)!important;color:var(--rarity-uncommon-text)!important;}
select[data-rarity].rarity-select-rare{background:linear-gradient(180deg,#fffaf4,#ffe9ce)!important;border-color:var(--rarity-rare-border)!important;color:var(--rarity-rare-text)!important;}
select[data-rarity].rarity-select-epic{background:linear-gradient(180deg,#fff7fc,#ffe0f3)!important;border-color:var(--rarity-epic-border)!important;color:var(--rarity-epic-text)!important;}
select[data-rarity].rarity-select-legendary{background:linear-gradient(180deg,#fffdf0,#ffe779)!important;border-color:var(--rarity-legendary-border)!important;color:var(--rarity-legendary-text)!important;box-shadow:0 0 0 3px rgba(255,210,31,.18),0 0 18px rgba(255,210,31,.24)!important;}
select[data-rarity] option[value="Common"]{color:var(--rarity-common-text)!important;}
select[data-rarity] option[value="Uncommon"]{color:var(--rarity-uncommon-text)!important;}
select[data-rarity] option[value="Rare"]{color:var(--rarity-rare-text)!important;}
select[data-rarity] option[value="Epic"]{color:var(--rarity-epic-text)!important;}
select[data-rarity] option[value="Legendary"]{color:var(--rarity-legendary-text)!important;}

/* Stop rarity classes from adding border/glow to whole card faces. Rarity should color labels only. */
.rarity-legendary .face,
.rarity-epic .face,
.rarity-rare .face,
.rarity-uncommon .face,
.rarity-common .face{
  box-shadow:0 8px 16px rgba(13,60,148,.18)!important;
}

/* Always show the official card back when any flip view is on the back side. */
.preview-card .face.back img,
.full-card-wrap .face.back img,
.card-inner .face.back img,
.reveal-clean-back img{
  content:url("../site_assets/StarlightCard_Back_NewLogo.png")!important;
  transform:none!important;
  filter:none!important;
  opacity:1!important;
}
.preview-card.flipped .face.front img,
.full-card-wrap.flipped .face.front img{
  content:url("../site_assets/StarlightCard_Back_NewLogo.png")!important;
  transform:none!important;
  filter:none!important;
  opacity:1!important;
}
.preview-card.flipped .face.back,
.full-card-wrap.flipped .face.back{
  opacity:1!important;
}
.preview-card.flipped .face.front,
.full-card-wrap.flipped .face.front{
  opacity:1!important;
}

/* =========================================================
   V22 flip fix: official card back must never appear mirrored.
   The previous hardening made the front face show the card back while flipped,
   which could reveal the reverse side of the 3D plane and look mirrored.
   This keeps the real back image on the back face only.
   ========================================================= */
.preview-card .face.back,
.full-card-wrap .face.back,
.card-inner .face.back {
  transform: rotateY(180deg) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
.preview-card .face.front,
.full-card-wrap .face.front,
.card-inner .face.front {
  transform: rotateY(0deg) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
.preview-card .face.back img,
.full-card-wrap .face.back img,
.card-inner .face.back img,
.reveal-clean-back img {
  content: url("../site_assets/StarlightCard_Back_NewLogo.png") !important;
  transform: scaleX(1) !important;
  filter: none !important;
  opacity: 1 !important;
}
.preview-card.flipped .preview-inner,
.preview-card.flipped:hover .preview-inner,
.full-card-wrap.flipped .full-inner,
.card-inner.flipped {
  transform: rotateY(180deg) !important;
}
.preview-card.flipped .face.front,
.full-card-wrap.flipped .face.front,
.card-inner.flipped .face.front {
  opacity: 0 !important;
  pointer-events: none !important;
}
.preview-card.flipped .face.back,
.full-card-wrap.flipped .face.back,
.card-inner.flipped .face.back {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.preview-card.flipped .face.front img,
.full-card-wrap.flipped .face.front img,
.card-inner.flipped .face.front img {
  content: normal !important;
}
.preview-card:not(.flipped) .face.front,
.full-card-wrap:not(.flipped) .face.front,
.card-inner:not(.flipped) .face.front {
  opacity: 1 !important;
}
.preview-card:not(.flipped) .face.back,
.full-card-wrap:not(.flipped) .face.back,
.card-inner:not(.flipped) .face.back {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================================================
   V23: stable flipping, stronger card interaction, clean full-view info
   ========================================================= */
/* Kill the older two-face flip system for preview/full view. We now swap the
   image source directly, so the official back can never render mirrored/blank. */
.preview-card.simple-card-3d,
.full-card-wrap.simple-card-3d {
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: visible !important;
  transform-style: preserve-3d !important;
  transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) !important;
  transition: transform .16s ease, filter .22s ease, box-shadow .22s ease !important;
  will-change: transform, filter !important;
  background: transparent !important;
}
.preview-card.simple-card-3d img,
.full-card-wrap.simple-card-3d img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2.5 / 3.5 !important;
  object-fit: contain !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 42px rgba(8,39,125,.25) !important;
  transform: translateZ(18px) !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}
.preview-card.simple-card-3d:hover,
.preview-card.simple-card-3d.tilting,
.full-card-wrap.simple-card-3d:hover,
.full-card-wrap.simple-card-3d.tilting {
  filter: drop-shadow(0 22px 28px rgba(8,39,125,.26)) drop-shadow(0 0 22px rgba(255,120,189,.38)) !important;
}
.preview-card.simple-card-3d.quick-flip,
.full-card-wrap.simple-card-3d.quick-flip {
  animation: v23FlipPop .5s ease both !important;
}
@keyframes v23FlipPop {
  0% { transform: translate3d(var(--drag-x,0), var(--drag-y,0), 0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(1); }
  45% { transform: translate3d(var(--drag-x,0), var(--drag-y,0), 0) rotateX(var(--tilt-x,0deg)) rotateY(88deg) scale(.985); filter: brightness(1.15); }
  100% { transform: translate3d(var(--drag-x,0), var(--drag-y,0), 0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(1); }
}
.full-card-wrap.simple-card-3d.is-dragging {
  cursor: grabbing !important;
  transition: filter .16s ease, box-shadow .16s ease !important;
}
.full-card-wrap.draggable-card { cursor: grab !important; touch-action: none; }

/* Binder hover: dynamic tilt + glow only, no zoom, no adjacent sweeping glare. */
.card-tile .card-inner {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1) !important;
  transition: transform .15s ease, filter .2s ease !important;
  transform-style: preserve-3d !important;
}
.card-tile:hover .card-inner,
.card-tile.tilting .card-inner,
.card-tile:focus-visible .card-inner {
  transform: translateY(-5px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1) !important;
  filter: drop-shadow(0 16px 20px rgba(8,39,125,.24)) drop-shadow(0 0 18px rgba(255,120,189,.38)) brightness(1.04) !important;
}
.card-tile:hover .face,
.card-tile.tilting .face {
  box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 12px 24px rgba(13,60,148,.20), 0 0 22px rgba(255,120,189,.32) !important;
}
.card-tile:hover .card-inner::before,
.card-tile:hover .card-inner::after,
.card-tile:hover .face::before,
.card-tile:hover .face::after,
.slot:hover::before,
.slot:hover::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}
.collection-card.tilting,
.collection-card:hover,
.fav-spot.tilting,
.fav-spot:hover {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-4px) scale(1) !important;
  filter: drop-shadow(0 14px 20px rgba(8,39,125,.20)) drop-shadow(0 0 16px rgba(255,120,189,.25)) !important;
}

/* Cleaner full-size card information. */
.clean-full-stage {
  grid-template-columns: auto minmax(260px, 440px) auto !important;
  grid-template-rows: 1fr auto !important;
  gap: 18px 22px !important;
  align-items: center !important;
}
.clean-full-stage .full-card-wrap.simple-card-3d {
  width: min(430px, 58vw) !important;
  max-height: 78vh !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
}
.clean-full-caption {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: min(760px, 92vw) !important;
  margin: 0 auto !important;
  padding: 16px 18px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  box-shadow: 0 16px 36px rgba(8,39,125,.16) !important;
  display: grid !important;
  gap: 8px !important;
  text-align: center !important;
  color: var(--navy) !important;
}
.clean-full-caption h2 {
  margin: 0 !important;
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  line-height: 1.05 !important;
}
.clean-full-caption .rarity-text { margin: 0 auto !important; }
.full-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
}
.full-meta span {
  display: inline-flex !important;
  gap: 6px !important;
  align-items: center !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  background: rgba(229,248,255,.78) !important;
  color: var(--blue) !important;
  font-weight: 800 !important;
}
.full-meta b { color: var(--pink-hot) !important; }
.clean-full-caption p {
  margin: 2px auto 0 !important;
  max-width: 680px !important;
  color: var(--muted) !important;
  line-height: 1.35 !important;
}
.detail-card-info h2 { margin-bottom: 8px !important; }
.clean-detail-list p { align-items: center !important; }

/* Reveal card can also respond to the mouse lightly once it appears. */
.reveal-clean-card {
  transform-style: preserve-3d !important;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) !important;
  transition: transform .16s ease, filter .22s ease !important;
}
.reveal-clean-card:hover,
.reveal-clean-card.tilting {
  filter: drop-shadow(0 24px 32px rgba(8,39,125,.28)) drop-shadow(0 0 24px rgba(255,120,189,.34)) !important;
}

/* V24 cleanup: cleaner flip animation, binder hover pop-out, no reveal frame */
.binder-book, .binder-page, .slot { overflow: visible !important; }
.binder-page { perspective: 1100px; }
.slot { position: relative; z-index: 1; }
.slot:hover { z-index: 20; }
.card-tile {
  transform-style: preserve-3d !important;
  perspective: 950px;
  overflow: visible !important;
  animation: starlightCardFloat 5.6s ease-in-out infinite;
  animation-delay: calc((var(--slot-i, 0) * .12s));
  will-change: transform, filter;
}
.card-tile .card-inner {
  transform-style: preserve-3d !important;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), filter .32s ease !important;
}
.card-tile:hover,
.card-tile:focus-visible {
  filter: drop-shadow(0 18px 24px rgba(22, 82, 190, .22)) drop-shadow(0 0 20px rgba(255, 120, 190, .30)) !important;
}
.card-tile:hover .card-inner,
.card-tile:focus-visible .card-inner {
  transform: translateY(-18px) translateZ(34px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1.045) !important;
}
.card-tile:hover .face,
.card-tile:focus-visible .face {
  box-shadow: 0 20px 35px rgba(31,88,190,.25), 0 0 0 2px rgba(255,255,255,.95), 0 0 26px rgba(255,126,196,.34) !important;
  filter: brightness(1.06) saturate(1.08);
}
.card-tile:hover::after,
.card-tile:hover .face::after,
.card-tile:focus-visible::after,
.card-tile:focus-visible .face::after { content: none !important; display: none !important; }
@keyframes starlightCardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Stable image swap flip: image never mirrors, just pivots out/in. */
.simple-card-3d { transform-style: preserve-3d; perspective: 1000px; }
.simple-card-3d img, #previewCardImg, #fullCardImg { transform: none !important; scale: 1 !important; }
.simple-card-3d.flip-animating-out {
  animation: starlightFlipOut .22s ease-in forwards !important;
}
.simple-card-3d.flip-animating-in {
  animation: starlightFlipIn .28s cubic-bezier(.2,.9,.2,1) forwards !important;
}
@keyframes starlightFlipOut {
  0% { transform: rotateY(0deg) translateZ(0); filter: brightness(1); }
  100% { transform: rotateY(88deg) translateZ(8px); filter: brightness(1.35); }
}
@keyframes starlightFlipIn {
  0% { transform: rotateY(-88deg) translateZ(8px); filter: brightness(1.35); }
  100% { transform: rotateY(0deg) translateZ(0); filter: brightness(1); }
}

/* Full view: smaller, cleaner details directly under the card. */
.clean-full-stage {
  display: grid !important;
  place-items: center !important;
  grid-template-rows: 1fr auto !important;
  gap: 12px !important;
  padding: 70px 92px 30px !important;
}
.full-card-wrap {
  width: min(390px, 44vw, 58vh) !important;
  max-height: 66vh !important;
  position: relative !important;
}
.full-card-wrap img { width: 100%; height: auto; max-height: 66vh; object-fit: contain; border-radius: 18px; display:block; }
.clean-full-caption {
  position: relative !important;
  bottom: auto !important;
  max-width: 620px !important;
  color: var(--navy) !important;
  text-shadow: none !important;
  background: rgba(255,255,255,.76) !important;
  border: 1px solid rgba(255,255,255,.94) !important;
  box-shadow: 0 14px 32px rgba(30,80,170,.16) !important;
  border-radius: 18px !important;
  padding: 10px 14px !important;
}
.clean-full-caption h2 { font-size: 1.14rem !important; margin: 0 0 3px !important; }
.clean-full-caption .rarity-text { font-size: .86rem !important; display: inline-block; margin-bottom: 5px; }
.clean-full-caption .full-meta { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; font-size:.78rem !important; }
.clean-full-caption .full-meta span { background: rgba(255,255,255,.64); border-radius: 999px; padding: 4px 8px; }
.clean-full-caption p { display:none !important; }
.draggable-card.is-dragging { cursor: grabbing; }
.draggable-card { cursor: grab; transition: transform .18s ease, filter .18s ease !important; }
.draggable-card.tilting {
  transform: translate3d(var(--drag-x, 0), var(--drag-y, 0), 0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) !important;
  filter: drop-shadow(0 28px 42px rgba(8,39,125,.28));
}
.preview-card.tilting {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-4px) !important;
  filter: drop-shadow(0 18px 25px rgba(8,39,125,.22));
}

/* Reveal overlay: remove the framed panel while keeping the magic. */
.reveal-clean {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  width: min(920px, 96vw) !important;
  min-height: min(720px, 94vh) !important;
}
.reveal-clean::before { opacity: .68 !important; }
.reveal-clean::after { opacity: .45 !important; }
.reveal-clean-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.reveal-clean-face { box-shadow: 0 28px 60px rgba(8,39,125,.34) !important; border-radius: 18px; overflow:hidden; }

/* V25 interaction pass: stable flip, clean hover pop, cute full view */
.binder-book, .binder-page, .slot { overflow: visible !important; }
.slot { z-index: 1; }
.slot:hover { z-index: 60 !important; }
.card-tile { overflow: visible !important; transform-style: preserve-3d !important; perspective: 1000px !important; animation: v25CardIdleFloat 4.8s ease-in-out infinite; }
.slot:nth-child(2n) .card-tile { animation-delay: .28s; }
.slot:nth-child(3n) .card-tile { animation-delay: .52s; }
@keyframes v25CardIdleFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-3px); } }
.card-tile .card-inner { transition: transform .28s cubic-bezier(.2,.85,.2,1), filter .28s ease !important; transform-style: preserve-3d !important; }
.card-tile:hover .card-inner,
.card-tile.tilting .card-inner,
.card-tile:focus-visible .card-inner {
  transform: translateY(-16px) translateZ(34px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1) !important;
  filter: drop-shadow(0 22px 26px rgba(8,39,125,.25)) drop-shadow(0 0 22px rgba(255,120,189,.38)) brightness(1.07) saturate(1.05) !important;
}
.card-tile:hover .face,
.card-tile.tilting .face,
.card-tile:focus-visible .face {
  box-shadow: 0 0 0 2px rgba(255,255,255,.96), 0 18px 34px rgba(13,60,148,.23), 0 0 30px rgba(255,120,189,.42) !important;
}
.card-tile:hover::after,
.card-tile:hover .face::after,
.card-tile:hover .card-inner::after,
.card-tile:hover .card-inner::before,
.card-tile:hover .face::before,
.slot:hover::before,
.slot:hover::after { content: none !important; display: none !important; opacity: 0 !important; animation: none !important; }

/* Use a true turn animation for all single-image flip controls without mirroring the back art. */
.simple-card-3d, .preview-card, .full-card-wrap { transform-style: preserve-3d !important; perspective: 1100px !important; }
.simple-card-3d img, #previewCardImg, #fullCardImg { transform: none !important; scale: 1 !important; }
.simple-card-3d.flip-turning,
.preview-card.flip-turning,
.full-card-wrap.flip-turning { animation: v25CardTurn .56s cubic-bezier(.22,.8,.22,1) both !important; }
@keyframes v25CardTurn {
  0% { transform: rotateY(0deg) translateZ(0); filter: brightness(1); }
  42% { transform: rotateY(84deg) translateZ(18px); filter: brightness(1.32); }
  58% { transform: rotateY(-82deg) translateZ(18px); filter: brightness(1.28); }
  100% { transform: rotateY(0deg) translateZ(0); filter: brightness(1); }
}
.preview-card.flipped,
.preview-card.showing-back,
.full-card-wrap.flipped,
.full-card-wrap.showing-back,
.full-card-wrap .face.back,
.preview-card .face.back { transform: none !important; }
.full-card-wrap .face.back img,
.preview-card .face.back img { transform: none !important; }

/* Shared gentle 3D hover for preview, full view, and reveal cards. */
.preview-card.tilting,
.full-card-wrap.tilting,
.reveal-clean-card.tilting,
.preview-card:hover,
.full-card-wrap:hover,
.reveal-clean-card:hover {
  transform: translate3d(var(--drag-x, 0), var(--drag-y, 0), 0) translateY(-6px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1) !important;
  filter: drop-shadow(0 24px 34px rgba(8,39,125,.24)) drop-shadow(0 0 24px rgba(255,120,189,.34)) brightness(1.04) !important;
}
.draggable-card.is-dragging { cursor: grabbing !important; }
.draggable-card { cursor: grab !important; }

/* Cute animated full-view background. */
#cardOverlay.open {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,150,211,.38), transparent 30%),
    radial-gradient(circle at 82% 16%, rgba(134,218,255,.38), transparent 28%),
    radial-gradient(circle at 50% 86%, rgba(255,226,122,.24), transparent 36%),
    linear-gradient(135deg, rgba(238,248,255,.94), rgba(255,226,241,.94)) !important;
  animation: v25FullBgDrift 9s ease-in-out infinite alternate !important;
}
#cardOverlay.open::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255,120,189,.55) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(114,207,255,.55) 0 1px, transparent 2px);
  background-size: 120px 120px, 84px 84px, 62px 62px;
  opacity: .65;
  animation: v25SparkleDrift 12s linear infinite;
}
@keyframes v25FullBgDrift { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(8deg); } }
@keyframes v25SparkleDrift { from { background-position: 0 0, 20px 40px, 50px 10px; } to { background-position: 90px -120px, -60px -40px, 120px -70px; } }
.clean-full-stage { position: relative; z-index: 2; gap: 10px !important; }
.clean-full-stage .full-card-wrap { width: min(390px, 44vw, 58vh) !important; }
.dynamic-card-info.clean-full-caption {
  width: min(640px, 88vw) !important;
  padding: 12px 16px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.80) !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  box-shadow: 0 18px 40px rgba(18,70,150,.16) !important;
  backdrop-filter: blur(14px) !important;
  display: grid !important;
  gap: 6px !important;
}
.dynamic-card-info .eyebrow { margin:0 !important; font-size:.68rem !important; color: var(--pink-hot) !important; }
.dynamic-card-info h2 { margin:0 !important; font-size: clamp(1.1rem,2.3vw,1.55rem) !important; }
.full-info-chips { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; font-size:.78rem; font-weight:900; }
.full-info-chips span { padding:5px 9px; border-radius:999px; background:rgba(229,248,255,.8); color:var(--blue); border:1px solid rgba(114,207,255,.35); }
.dynamic-card-info .full-description { display:block !important; margin:2px auto 0 !important; max-width:560px !important; font-size:.84rem !important; line-height:1.3 !important; color:var(--muted) !important; }

/* Reveal overlay without a card frame, keeping the magical effects. */
.reveal-clean { background: transparent !important; border:0 !important; box-shadow:none !important; backdrop-filter:none !important; }
.reveal-clean-card { background: transparent !important; border:0 !important; box-shadow:none !important; }
.reveal-clean-face { border-radius:18px !important; overflow:hidden !important; box-shadow: 0 30px 70px rgba(8,39,125,.34) !important; }

/* Hide old image-swap flip classes if any previous CSS tries to run them. */
.flip-animating-out, .flip-animating-in { animation: none !important; }

/* =========================
   V27: safer dynamic full/reveal screens
   Rebuilt from stable V25 base to avoid the V26 breakage.
   ========================= */

#cardOverlay.open,
#revealOverlay.open {
  isolation: isolate;
}

.v27-full-stage {
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 139, 202, .34), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(126, 216, 255, .34), transparent 30%),
    radial-gradient(circle at 50% 92%, rgba(255, 226, 129, .28), transparent 34%),
    linear-gradient(135deg, rgba(68, 129, 255, .88), rgba(255, 170, 217, .82));
}

.v27-full-stage:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255,255,255,.75) 0 1px, transparent 2px);
  background-size: 95px 95px, 54px 54px;
  opacity: .58;
  animation: v27SparkleDrift 12s linear infinite;
}

.v27-full-bg span {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 40% 60% 55% 45%;
  background: rgba(255,255,255,.16);
  filter: blur(1px);
  animation: v27BubbleFloat 8s ease-in-out infinite;
  pointer-events: none;
}
.v27-full-bg span:nth-child(1){left:8%;top:16%;animation-delay:0s;background:rgba(255,139,202,.18)}
.v27-full-bg span:nth-child(2){right:11%;top:14%;animation-delay:1.2s;background:rgba(126,216,255,.18)}
.v27-full-bg span:nth-child(3){left:18%;bottom:10%;animation-delay:2.4s;background:rgba(255,226,129,.18)}
.v27-full-bg span:nth-child(4){right:22%;bottom:12%;animation-delay:3.1s;background:rgba(255,255,255,.16)}

.v27-full-stage .full-card-wrap {
  z-index: 3;
  filter: drop-shadow(0 24px 36px rgba(8,39,125,.30));
  animation: v27FullFloat 4.8s ease-in-out infinite;
}

.v27-full-stage .full-card-wrap img {
  border-radius: 18px;
}

.v27-full-stage .full-card-wrap:after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 26px;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.38), transparent 58%);
  opacity: .55;
  animation: v27CardShine 4.5s ease-in-out infinite;
}

.v27-full-info {
  width: min(720px, 78vw);
  max-width: 720px;
  padding: 14px 18px !important;
  border-radius: 24px;
  background: rgba(255,255,255,.76);
  color: var(--navy) !important;
  text-shadow: none !important;
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 18px 42px rgba(20,80,170,.20);
  backdrop-filter: blur(12px);
}

.v27-full-info h2 {
  margin: 0 0 8px !important;
  font-size: clamp(1.3rem, 2.6vw, 2rem) !important;
  color: var(--navy);
}

.v27-full-info .eyebrow {
  color: var(--pink-hot) !important;
}

.v27-full-info .full-info-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 8px 0;
}

.v27-full-info .full-info-chips span {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(114,207,255,.32);
  color: var(--navy);
  font-size: .88rem;
  font-weight: 900;
}

.v27-full-info .full-description {
  margin: 8px auto 0 !important;
  max-width: 620px;
  color: #31579d;
  font-size: .92rem;
  line-height: 1.35;
}

#revealOverlay.open {
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.42), transparent 22%),
    radial-gradient(circle at 24% 20%, rgba(255,139,202,.32), transparent 30%),
    radial-gradient(circle at 76% 22%, rgba(126,216,255,.30), transparent 30%),
    linear-gradient(135deg, rgba(83, 134, 255, .74), rgba(255, 174, 220, .74));
}

#revealOverlay .reveal-clean {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  overflow: visible !important;
}

#revealOverlay .reveal-clean:before {
  opacity: .92 !important;
  filter: blur(10px);
  animation: v27RevealAura 4.8s ease-in-out infinite;
}

.v27-reveal-ribbons i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(520px, 74vw);
  height: min(520px, 74vw);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(255,255,255,.54);
  border-left-color: rgba(255,139,202,.30);
  pointer-events: none;
  animation: v27RibbonSpin 6s linear infinite;
}
.v27-reveal-ribbons i:nth-child(1){--r:16deg;animation-duration:7s}
.v27-reveal-ribbons i:nth-child(2){--r:70deg;animation-duration:9s;border-top-color:rgba(126,216,255,.48)}
.v27-reveal-ribbons i:nth-child(3){--r:128deg;animation-duration:11s;border-top-color:rgba(255,226,129,.48)}

.v27-reveal-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(430px, 64vw);
  height: min(430px, 64vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.96) 0 4px, transparent 6px),
    radial-gradient(circle at 96% 52%, rgba(255,226,129,.9) 0 3px, transparent 6px),
    radial-gradient(circle at 10% 72%, rgba(126,216,255,.9) 0 3px, transparent 6px);
  animation: v27OrbitSpin 4.2s linear infinite;
  opacity: .86;
}

#revealOverlay .reveal-clean-card {
  filter: drop-shadow(0 26px 34px rgba(8,39,125,.30));
  animation: v27RevealFloat 3.6s ease-in-out infinite;
}

#revealOverlay .reveal-clean-card.charge {
  animation: v27RevealFloat 3.6s ease-in-out infinite, v27ChargePulse 1.1s ease-in-out infinite !important;
}

#revealOverlay .reveal-clean-card.burst {
  animation: v27RevealBloom .9s cubic-bezier(.16,.9,.2,1) both !important;
}

#revealOverlay .reveal-clean-card.revealed {
  animation: v27RevealFloat 4s ease-in-out infinite !important;
}

#revealOverlay .reveal-clean-title {
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: var(--pink-hot) !important;
  text-shadow: none !important;
  box-shadow: 0 12px 26px rgba(255,79,167,.16);
}

#revealOverlay.is-finished .reveal-card-info {
  background: rgba(255,255,255,.82);
  color: var(--navy);
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 22px;
  padding: 12px 18px;
  box-shadow: 0 16px 38px rgba(20,80,170,.18);
  text-shadow: none;
}

@keyframes v27SparkleDrift { to { background-position: 95px -95px, -54px 54px; } }
@keyframes v27BubbleFloat { 50% { transform: translateY(-20px) scale(1.06) rotate(8deg); } }
@keyframes v27FullFloat { 50% { transform: translateY(-8px); } }
@keyframes v27CardShine { 0%, 42% { transform: translateX(-90%); opacity: 0; } 55% { opacity: .55; } 100% { transform: translateX(90%); opacity: 0; } }
@keyframes v27RevealAura { 50% { transform: scale(1.05); opacity: .75; } }
@keyframes v27RibbonSpin { to { transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) + 360deg)); } }
@keyframes v27OrbitSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes v27RevealFloat { 50% { transform: translateY(-10px); } }
@keyframes v27ChargePulse { 50% { filter: drop-shadow(0 0 28px rgba(255,255,255,.78)) drop-shadow(0 0 36px rgba(255,139,202,.42)); } }
@keyframes v27RevealBloom { 0% { transform: scale(.98); filter: brightness(1); } 45% { transform: scale(1.08); filter: brightness(1.65) saturate(1.25); } 100% { transform: scale(1); filter: brightness(1); } }

@media (max-width: 760px) {
  .v27-full-info { width: min(92vw, 560px); }
  .v27-full-info .full-description { display: none; }
}

/* V28 hotfix: remove the card-shaped moving light box from reveal animations. */
#revealOverlay .reveal-clean-card::before,
#revealOverlay .reveal-clean.rarity-epic .reveal-clean-card::before,
#revealOverlay .reveal-clean.rarity-legendary .reveal-clean-card::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
  background: none !important;
}

/* V29: clean Digimon-inspired full view analyzer + true card-spin flip */
#cardOverlay.open {
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 139, 202, .26), transparent 34%),
    radial-gradient(circle at 18% 20%, rgba(118, 216, 255, .22), transparent 30%),
    linear-gradient(135deg, rgba(14, 40, 125, .72), rgba(126, 105, 202, .58), rgba(255, 182, 222, .52)) !important;
  backdrop-filter: blur(16px) saturate(1.15) !important;
}
#cardOverlay.open::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.75) 0 1px, transparent 2px);
  background-size: 54px 54px, 54px 54px, 130px 130px;
  opacity:.34;
  animation: analyzerGridDrift 12s linear infinite;
}
@keyframes analyzerGridDrift { to { background-position: 54px 54px, 54px 54px, 130px -130px; } }

.analyzer-full-stage {
  position:relative !important;
  min-height:100vh !important;
  width:100vw !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  padding:80px 96px 52px !important;
  perspective:1200px !important;
}
.analyzer-bg span {
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 0 34px rgba(126,216,255,.18), inset 0 0 30px rgba(255,139,202,.11);
  animation: analyzerOrbit 9s ease-in-out infinite;
  pointer-events:none;
}
.analyzer-bg span:nth-child(1){width:620px;height:620px;left:calc(50% - 310px);top:calc(50% - 360px)}
.analyzer-bg span:nth-child(2){width:420px;height:420px;right:8%;bottom:5%;animation-delay:-2s}
.analyzer-bg span:nth-child(3){width:280px;height:280px;left:7%;top:14%;animation-delay:-4s}
@keyframes analyzerOrbit { 50% { transform: rotate(10deg) scale(1.04); opacity:.52; } }

.analyzer-screen {
  position:relative;
  z-index:2;
  width:min(560px, 82vw);
  display:grid;
  gap:16px;
  justify-items:center;
  padding:18px 18px 20px;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 28px 80px rgba(7, 31, 100, .28), inset 0 0 0 1px rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}
.analyzer-screen::before {
  content:"";
  position:absolute;
  inset:10px;
  pointer-events:none;
  border-radius:24px;
  border:1px solid rgba(126,216,255,.20);
}
.analyzer-topline {
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:8px 12px;
  border-radius:16px;
  color:#fff;
  font-weight:900;
  letter-spacing:.09em;
  font-size:.76rem;
  text-shadow:0 2px 8px rgba(0,0,0,.22);
  background:linear-gradient(90deg, rgba(20,91,216,.26), rgba(255,120,189,.23));
}
.analyzer-card-zone {
  position:relative;
  width:100%;
  min-height:clamp(390px, 59vh, 620px);
  display:grid;
  place-items:center;
}
.analyzer-reticle {
  position:absolute;
  width:min(520px, 74vw);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(255,255,255,.20) 50%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, rgba(255,255,255,.20) 50%, transparent 50.3%);
  box-shadow:0 0 42px rgba(118,216,255,.18), inset 0 0 42px rgba(255,139,202,.12);
  animation: analyzerReticle 10s linear infinite;
  pointer-events:none;
}
@keyframes analyzerReticle { to { transform: rotate(360deg); } }
.analyzer-flip {
  position:absolute !important;
  top:10px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  z-index:6 !important;
  border:0 !important;
  border-radius:999px !important;
  padding:11px 20px !important;
  background:linear-gradient(180deg,#ff8bca,#ff4fa7) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(255,79,167,.25) !important;
  font-weight:900 !important;
}
.analyzer-full-stage .full-card-wrap {
  position:relative !important;
  width:min(350px, 52vw, 46vh) !important;
  max-width:390px !important;
  z-index:4 !important;
  border-radius:20px !important;
  transform-style:preserve-3d !important;
  transform-origin:center center !important;
  filter:drop-shadow(0 26px 34px rgba(8,39,125,.36)) !important;
}
.analyzer-full-stage .full-card-wrap img {
  width:100% !important;
  height:auto !important;
  max-height:58vh !important;
  object-fit:contain !important;
  border-radius:18px !important;
  display:block !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
}
.analyzer-info-card {
  position:relative;
  z-index:3;
  width:100%;
  padding:14px 16px 15px;
  border-radius:22px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.94);
  box-shadow:0 16px 35px rgba(8,39,125,.16);
  color:var(--navy);
}
.analyzer-title-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.analyzer-title-row h2 {
  margin:0;
  font-size:clamp(1.25rem, 2.4vw, 1.65rem);
  line-height:1.05;
}
.analyzer-rarity {
  flex:0 0 auto;
  border-radius:999px;
  padding:8px 12px;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(21,91,216,.12), 0 6px 14px rgba(8,39,125,.09);
  font-size:.82rem;
  font-weight:900;
  text-transform:uppercase;
}
.analyzer-data-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin-bottom:10px;
}
.analyzer-data-grid span {
  min-width:0;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(238,248,255,.95), rgba(255,226,241,.56));
  border:1px solid rgba(21,91,216,.12);
  padding:9px 10px;
  font-size:.82rem;
  overflow:hidden;
  text-overflow:ellipsis;
}
.analyzer-data-grid b {
  display:block;
  margin-bottom:3px;
  color:var(--muted);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.analyzer-description {
  margin:0;
  font-size:.92rem;
  color:#244ca3;
  line-height:1.35;
}
.analyzer-close {
  position:absolute !important;
  top:22px !important;
  right:28px !important;
  z-index:8 !important;
}
.analyzer-arrow {
  z-index:7 !important;
}

/* Make the flip read like a real card turning over, without mirroring the back art. */
.simple-card-3d.flip-turning,
.preview-card.flip-turning,
.full-card-wrap.flip-turning {
  animation: starlightTrueCardFlip .72s cubic-bezier(.2,.78,.18,1) both !important;
  transform-origin:center center !important;
  will-change:transform, filter !important;
}
@keyframes starlightTrueCardFlip {
  0% { transform: rotateY(0deg) scale(1); filter:drop-shadow(0 18px 24px rgba(8,39,125,.22)); }
  36% { transform: rotateY(82deg) scale(.98); filter:drop-shadow(0 12px 18px rgba(8,39,125,.18)); }
  50% { transform: rotateY(92deg) scale(.975); filter:drop-shadow(0 8px 14px rgba(8,39,125,.16)); }
  64% { transform: rotateY(-72deg) scale(.99); filter:drop-shadow(0 16px 22px rgba(8,39,125,.20)); }
  100% { transform: rotateY(0deg) scale(1); filter:drop-shadow(0 22px 28px rgba(8,39,125,.26)); }
}
.simple-card-3d.flip-turning img,
.preview-card.flip-turning img,
.full-card-wrap.flip-turning img {
  transform:none !important;
  scale:1 !important;
}

@media(max-width:760px){
  .analyzer-full-stage{padding:76px 50px 34px!important;}
  .analyzer-screen{width:min(94vw,520px);padding:14px;}
  .analyzer-card-zone{min-height:420px;}
  .analyzer-data-grid{grid-template-columns:1fr;}
  .analyzer-description{display:none;}
  .analyzer-arrow.left{left:8px!important;}
  .analyzer-arrow.right{right:8px!important;}
}

/* =========================================================
   V31: preserve the analyzer layout, but clean up Full View.
   - remove analyzer title strip
   - move flip above the card
   - apply the same subtle binder tilt to Full View
   - make source-swap flip read as a true card turn
   ========================================================= */
.analyzer-topline{display:none!important;}
.analyzer-actions{
  position:relative!important;
  z-index:9!important;
  width:100%!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  min-height:48px!important;
  margin:0 0 8px!important;
  pointer-events:auto!important;
}
.analyzer-actions .analyzer-flip,
.analyzer-flip{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  transform:none!important;
  z-index:10!important;
  margin:0 auto!important;
}
.analyzer-card-zone{
  overflow:visible!important;
  min-height:clamp(390px,56vh,600px)!important;
  perspective:1100px!important;
}
.analyzer-full-stage .full-card-wrap.simple-card-3d,
.full-card-wrap.simple-card-3d{
  --tilt-x:0deg;
  --tilt-y:0deg;
  --drag-x:0px;
  --drag-y:0px;
  animation:none!important;
  transform-style:preserve-3d!important;
  transform-origin:center center!important;
  transform:translate3d(var(--drag-x),var(--drag-y),0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))!important;
  transition:transform .16s ease, filter .22s ease!important;
  will-change:transform,filter!important;
  filter:drop-shadow(0 22px 34px rgba(8,39,125,.32))!important;
}
.analyzer-full-stage .full-card-wrap.simple-card-3d:hover,
.analyzer-full-stage .full-card-wrap.simple-card-3d.tilting,
.full-card-wrap.simple-card-3d:hover,
.full-card-wrap.simple-card-3d.tilting{
  transform:translate3d(var(--drag-x),var(--drag-y),0) translateY(-6px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))!important;
  filter:drop-shadow(0 26px 40px rgba(8,39,125,.36)) drop-shadow(0 0 20px rgba(255,120,189,.28))!important;
}
.analyzer-full-stage .full-card-wrap.simple-card-3d img,
.full-card-wrap.simple-card-3d img,
#fullCardImg{
  transform:none!important;
  scale:1!important;
  filter:none!important;
  image-rendering:auto!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
.full-card-wrap.simple-card-3d.flip-turning,
.preview-card.simple-card-3d.flip-turning,
.simple-card-3d.flip-turning{
  animation:starlightCleanCardTurn .72s cubic-bezier(.22,.82,.18,1) both!important;
  transform-origin:center center!important;
  pointer-events:none!important;
}
@keyframes starlightCleanCardTurn{
  0%{transform:translate3d(var(--drag-x,0px),var(--drag-y,0px),0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));filter:drop-shadow(0 22px 34px rgba(8,39,125,.28));}
  44%{transform:translate3d(var(--drag-x,0px),var(--drag-y,0px),0) rotateX(0deg) rotateY(88deg);filter:drop-shadow(0 12px 18px rgba(8,39,125,.18)) brightness(1.08);}
  52%{transform:translate3d(var(--drag-x,0px),var(--drag-y,0px),0) rotateX(0deg) rotateY(90deg);filter:drop-shadow(0 10px 16px rgba(8,39,125,.16)) brightness(1.08);}
  100%{transform:translate3d(var(--drag-x,0px),var(--drag-y,0px),0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));filter:drop-shadow(0 22px 34px rgba(8,39,125,.28));}
}

/* =========================================================
   V32: stable binder card motion + reveal close behavior styling
   - no reveal-card mouse tilt
   - no card sweep blur/glare on neighboring cards
   - subtle binder idle hover
   - prominent reveal rarity
   ========================================================= */
.binder-book,
.binder-page,
.slot{
  overflow: visible !important;
}
.slot:not(.empty-slot){
  animation: starlightSlotBreathe 5.8s ease-in-out infinite;
  animation-delay: calc((var(--slot-delay, 0) * .18s));
  transform-origin: center center;
}
.binder-page .slot:nth-child(2n){ animation-delay: .55s; }
.binder-page .slot:nth-child(3n){ animation-delay: 1.05s; }
.binder-page .slot:nth-child(5n){ animation-delay: 1.55s; }
@keyframes starlightSlotBreathe{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}
.card-tile,
.card-inner,
.face,
.face img{
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
}
.card-tile{
  --tilt-x:0deg;
  --tilt-y:0deg;
  position:relative !important;
  overflow:visible !important;
  transform:none !important;
  filter:none !important;
  z-index:1;
}
.card-tile:hover,
.card-tile.tilting{
  z-index:80 !important;
  transform:none !important;
  filter:none !important;
}
.card-tile .card-inner{
  transform: translateY(0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) !important;
  transition: transform .24s cubic-bezier(.2,.85,.2,1), box-shadow .22s ease !important;
  filter:none !important;
  will-change:transform;
}
.card-tile:hover .card-inner,
.card-tile.tilting .card-inner{
  transform: translateY(-13px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) !important;
  filter:none !important;
}
.card-tile:hover .face,
.card-tile.tilting .face{
  box-shadow:0 16px 32px rgba(21,91,216,.24),0 0 0 2px rgba(255,255,255,.92),0 0 24px rgba(255,120,189,.28) !important;
}
.card-tile:hover:after,
.card-tile.tilting:after{
  content:none !important;
  display:none !important;
  animation:none !important;
}
.card-tile:hover img,
.card-tile.tilting img,
.reveal-clean-card img,
.full-card-wrap img,
.preview-card img{
  filter:none !important;
  image-rendering:auto !important;
}
.card-tile:hover img.obscured,
.card-tile.tilting img.obscured{
  filter:brightness(.78) saturate(.9) blur(.35px) !important;
}

/* Reveal screen should not respond to mouse movement now. */
#revealOverlay .reveal-clean-card,
#revealOverlay .reveal-clean-card:hover,
#revealOverlay .reveal-clean-card.tilting{
  transform:none !important;
  cursor:default !important;
}
#revealOverlay .reveal-clean-card.revealed,
#revealOverlay .reveal-clean-card.charge,
#revealOverlay .reveal-clean-card.burst{
  transform:none !important;
}
#revealOverlay .reveal-card-info{
  display:grid !important;
  place-items:center !important;
  gap:6px !important;
}
#revealOverlay .reveal-card-info h3{
  margin:0 !important;
  font-size:clamp(1.45rem,3vw,2.05rem) !important;
  line-height:1.05 !important;
}
#revealOverlay .reveal-info-series{
  display:none !important;
}
#revealOverlay .reveal-info-rarity{
  font-size:clamp(1.05rem,2.4vw,1.45rem) !important;
  padding:.42rem 1rem !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  border-width:3px !important;
  box-shadow:0 8px 18px rgba(8,39,125,.14),0 0 20px rgba(255,120,189,.18) !important;
}


.rarity-text,
.pill.rarity-pill,
.hero-pill.rarity-pill,
.reveal-info-rarity{
  position:relative;
  isolation:isolate;
  box-shadow:0 7px 16px rgba(8,39,125,.10), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.rarity-text::after,
.pill.rarity-pill::after,
.hero-pill.rarity-pill::after,
.reveal-info-rarity::after{
  content:"";
  position:absolute;
  inset:2px 5px auto 5px;
  height:38%;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,0));
  pointer-events:none;
  z-index:-1;
}
.rarity-text.rarity-legendary,
.pill.rarity-legendary,
.hero-pill.rarity-legendary,
.reveal-info-rarity.rarity-legendary{
  background:linear-gradient(180deg,#fff9b9,#ffd437 60%,#ffb300)!important;
  color:#7b4f00!important;
  border-color:#fff0a6!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.75),0 0 18px rgba(255,211,49,.48),0 9px 20px rgba(194,132,0,.18)!important;
}
.rarity-text.rarity-epic,
.pill.rarity-epic,
.hero-pill.rarity-epic,
.reveal-info-rarity.rarity-epic{
  background:linear-gradient(180deg,#fff2fb,#ffb8df 60%,#ff82c6)!important;
  color:#9d1261!important;
  border-color:#ffd2eb!important;
}
.rarity-text.rarity-rare,
.pill.rarity-rare,
.hero-pill.rarity-rare,
.reveal-info-rarity.rarity-rare{
  background:linear-gradient(180deg,#fff5e9,#ffc884 62%,#ff9b3d)!important;
  color:#8f4300!important;
  border-color:#ffe0bd!important;
}
.rarity-text.rarity-uncommon,
.pill.rarity-uncommon,
.hero-pill.rarity-uncommon,
.reveal-info-rarity.rarity-uncommon{
  background:linear-gradient(180deg,#effaff,#bdeaff 62%,#7ed8ff)!important;
  color:#075292!important;
  border-color:#d9f3ff!important;
}
.rarity-text.rarity-common,
.pill.rarity-common,
.hero-pill.rarity-common,
.reveal-info-rarity.rarity-common{
  background:linear-gradient(180deg,#fff,#eef2f7 62%,#d9e1ec)!important;
  color:#56657b!important;
  border-color:#fff!important;
}

/* =========================================================
   V33: reveal button safety + deeper 3D binder frame
   - keep reveal/collected button clickable above the card hover lift
   - add dimensional binder page/sleeve styling without changing card logic
   ========================================================= */
.binder-book{
  border:1px solid rgba(255,255,255,.95) !important;
  background:
    linear-gradient(90deg,rgba(207,189,170,.48) 0 2%,rgba(255,250,244,.98) 7%,rgba(255,255,255,.96) 48%,rgba(226,210,196,.72) 50%,rgba(255,255,255,.96) 52%,rgba(255,250,244,.98) 93%,rgba(207,189,170,.48) 100%) !important;
  box-shadow:
    0 28px 62px rgba(14,44,122,.22),
    0 9px 0 rgba(130,104,92,.10),
    inset 0 0 0 3px rgba(255,255,255,.95),
    inset 0 0 0 7px rgba(166,138,124,.12),
    inset 22px 0 34px rgba(118,85,72,.10),
    inset -22px 0 34px rgba(118,85,72,.10) !important;
  transform-style:preserve-3d !important;
}
.binder-book::before{
  width:18px !important;
  background:
    linear-gradient(90deg,rgba(126,101,96,.22),rgba(255,255,255,.9) 34%,rgba(163,137,132,.45) 50%,rgba(255,255,255,.9) 66%,rgba(126,101,96,.22)) !important;
  box-shadow:
    0 0 0 1px rgba(102,75,72,.18),
    0 18px 26px rgba(91,64,60,.18),
    inset 0 0 14px rgba(255,255,255,.85) !important;
}
.binder-book::after{
  background:
    radial-gradient(circle at 50% 48%,transparent 36%,rgba(132,90,85,.07) 39%,transparent 50%),
    linear-gradient(90deg,rgba(255,255,255,.14),transparent 13%,transparent 87%,rgba(255,255,255,.14)) !important;
}
.binder-page{
  background:
    linear-gradient(145deg,rgba(255,255,255,.84),rgba(243,246,255,.72) 55%,rgba(255,232,244,.70)) !important;
  border:1px solid rgba(255,255,255,.96) !important;
  box-shadow:
    0 12px 28px rgba(23,62,140,.13),
    inset 0 0 0 2px rgba(255,255,255,.70),
    inset 0 16px 24px rgba(255,255,255,.45),
    inset 0 -14px 24px rgba(65,102,180,.08) !important;
}
.binder-page::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:18px;
  pointer-events:none;
  border:1px dashed rgba(37,83,164,.14);
  box-shadow:inset 0 0 24px rgba(114,207,255,.12);
}
.ring{
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.78),
    inset 0 -3px 5px rgba(94,63,74,.28),
    0 4px 10px rgba(88,57,70,.22) !important;
}
.slot{
  isolation:isolate !important;
  padding-bottom:30px !important;
  background:
    linear-gradient(145deg,rgba(232,240,255,.68),rgba(255,238,247,.65)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.82),
    inset 0 10px 18px rgba(255,255,255,.38),
    inset 0 -10px 18px rgba(60,92,160,.07),
    0 4px 11px rgba(34,73,150,.06) !important;
}
.card-tile{
  z-index:2 !important;
}
.card-tile:hover,
.card-tile.tilting{
  z-index:5 !important;
}
.slot .tiny-reveal{
  position:absolute !important;
  left:50% !important;
  bottom:5px !important;
  transform:translateX(-50%) !important;
  z-index:120 !important;
  pointer-events:auto !important;
  min-width:76% !important;
  white-space:nowrap !important;
  padding:8px 13px !important;
  font-size:.82rem !important;
  line-height:1 !important;
}
.slot .tiny-reveal:hover,
.slot .tiny-reveal:focus-visible{
  bottom:5px !important;
  transform:translateX(-50%) translateY(-2px) scale(1.035) !important;
  z-index:140 !important;
}
.slot:hover .tiny-reveal,
.slot:focus-within .tiny-reveal{
  z-index:140 !important;
}
.slot .card-inner{
  transform-origin:center 44% !important;
}
.slot:hover .card-inner,
.slot .card-tile.tilting .card-inner{
  transform: translateY(-10px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) !important;
}

/* V34: Binder thumbnail sizing + deeper 3D binder frame
   Goal: preserve the improved binder, but stop card thumbnails from being cropped. */
.binder-wrap,
.binder-book,
.binder-page,
.slot {
  overflow: visible !important;
}

.binder-book {
  background:
    linear-gradient(90deg, rgba(177,161,145,.34) 0%, rgba(255,255,255,.96) 4%, rgba(255,250,245,.98) 45%, rgba(210,196,185,.38) 50%, rgba(255,250,245,.98) 55%, rgba(255,255,255,.96) 96%, rgba(177,161,145,.32) 100%),
    linear-gradient(135deg,#faf3ea,#ffffff 44%,#f4ebe5);
  border: 1px solid rgba(121,91,68,.24) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -14px 28px rgba(128,92,72,.10),
    inset 0 0 0 4px rgba(255,255,255,.55),
    0 18px 0 rgba(144,119,104,.22),
    0 30px 70px rgba(8,39,125,.26) !important;
  transform: perspective(1600px) rotateX(1.1deg);
}

.binder-book::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 36%, rgba(255,120,189,.055) 70%),
    linear-gradient(90deg, transparent 48%, rgba(77,57,47,.10) 50%, transparent 52%) !important;
}

.binder-page {
  background:
    linear-gradient(145deg, rgba(255,255,255,.72), rgba(245,250,255,.50)),
    repeating-linear-gradient(90deg, rgba(110,145,210,.035) 0 2px, transparent 2px 22px) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.75),
    inset 0 10px 18px rgba(255,255,255,.65),
    inset 0 -12px 22px rgba(84,84,140,.08),
    0 14px 24px rgba(27,63,142,.12) !important;
}

.slot {
  /* Reserve a stable shelf for the reveal/collected button so hover never covers it. */
  padding: 8px 8px 42px !important;
  aspect-ratio: 2.5 / 3.72 !important;
  background:
    linear-gradient(145deg, rgba(231,240,255,.68), rgba(255,231,243,.58)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.90),
    inset 0 12px 20px rgba(255,255,255,.64),
    inset 0 -10px 20px rgba(115,136,190,.08),
    0 10px 18px rgba(18,65,145,.08) !important;
}

.slot::before {
  content: "";
  position: absolute;
  inset: 5px 5px 38px 5px;
  border-radius: 14px;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.86);
  box-shadow: inset 0 0 18px rgba(255,255,255,.55);
  z-index: 0;
}

.card-tile {
  position: relative !important;
  z-index: 3 !important;
  height: 100% !important;
  width: 100% !important;
  overflow: visible !important;
}

.card-inner {
  height: 100% !important;
  width: 100% !important;
  overflow: visible !important;
}

.face {
  overflow: hidden !important;
  background: rgba(255,255,255,.92) !important;
}

.face img,
.card-tile img,
.binder-book .face img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  image-rendering: auto !important;
}

.card-tile:hover,
.card-tile:focus-visible {
  z-index: 90 !important;
}

.card-tile:hover .card-inner,
.card-tile:focus-visible .card-inner {
  transform: translateY(-10px) rotateX(7deg) rotateY(8deg) scale(1.025) !important;
  filter: drop-shadow(0 18px 22px rgba(8,39,125,.24)) !important;
}

.tiny-reveal {
  z-index: 120 !important;
  bottom: 7px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: min(148px, calc(100% - 18px));
  text-align: center;
}

.tiny-reveal:hover,
.tiny-reveal:focus-visible {
  bottom: 7px !important;
  transform: translateX(-50%) scale(1.045) !important;
}

.slot:hover .tiny-reveal,
.slot:focus-within .tiny-reveal {
  z-index: 130 !important;
}

.empty-slot {
  min-height: 0 !important;
}

@media (max-width: 1180px) {
  .slot { padding-bottom: 38px !important; }
  .tiny-reveal { font-size: .78rem !important; padding: 8px 12px !important; }
}


/* =========================================================
   V35: restore stable binder hover, stop repeat hover SFX jitter,
   and change flip to a clean card spin.
   ========================================================= */
.binder-book,
.binder-page,
.slot{
  overflow: visible !important;
}
.slot:not(.empty-slot){
  animation: v35BinderSlotFloat 5.6s ease-in-out infinite !important;
  transform-origin:center center !important;
}
.binder-page .slot:nth-child(2n){ animation-delay:.35s !important; }
.binder-page .slot:nth-child(3n){ animation-delay:.85s !important; }
.binder-page .slot:nth-child(5n){ animation-delay:1.25s !important; }
@keyframes v35BinderSlotFloat{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-2.5px) rotate(.12deg); }
}
.card-tile{
  --tilt-x:0deg;
  --tilt-y:0deg;
  position:relative !important;
  overflow:visible !important;
  transform:none !important;
  filter:none !important;
  z-index:3 !important;
  perspective:1000px !important;
  transform-style:preserve-3d !important;
}
.card-tile:hover,
.card-tile.tilting,
.card-tile:focus-visible{
  z-index:95 !important;
  transform:none !important;
  filter:none !important;
}
.card-tile .card-inner{
  height:100% !important;
  width:100% !important;
  overflow:visible !important;
  transform: translateY(0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(1) !important;
  transition: transform .24s cubic-bezier(.2,.85,.2,1), filter .22s ease !important;
  transform-style:preserve-3d !important;
  will-change:transform !important;
  filter:none !important;
}
.card-tile:hover .card-inner,
.card-tile.tilting .card-inner,
.card-tile:focus-visible .card-inner{
  transform: translateY(-14px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(1) !important;
  filter: drop-shadow(0 18px 24px rgba(8,39,125,.24)) !important;
}
.card-tile:hover .face,
.card-tile.tilting .face,
.card-tile:focus-visible .face{
  box-shadow:
    0 16px 30px rgba(21,91,216,.22),
    0 0 0 2px rgba(255,255,255,.92),
    0 0 22px rgba(255,120,189,.26) !important;
}
.card-tile:hover::after,
.card-tile.tilting::after,
.card-tile:hover .face::after,
.card-tile.tilting .face::after,
.card-tile:hover .card-inner::before,
.card-tile:hover .card-inner::after,
.card-tile:hover .face::before{
  content:none !important;
  display:none !important;
  animation:none !important;
}
.card-tile img,
.card-tile:hover img,
.card-tile.tilting img,
.card-tile:focus-visible img{
  filter:none !important;
  transform:none !important;
  scale:1 !important;
  image-rendering:auto !important;
}
.card-tile img.obscured,
.card-tile:hover img.obscured,
.card-tile.tilting img.obscured{
  filter:brightness(.78) saturate(.9) blur(.35px) !important;
}
/* keep the V34 full-card fit fix */
.face img,
.card-tile img,
.binder-book .face img{
  object-fit:contain !important;
  object-position:center center !important;
}
/* Keep reveal/collected buttons above the lifted cards. */
.slot .tiny-reveal,
.tiny-reveal{
  z-index:160 !important;
  pointer-events:auto !important;
}
.slot:hover .tiny-reveal,
.slot:focus-within .tiny-reveal{
  z-index:170 !important;
}

/* Clean card-spin flip. The image swaps at the midpoint in JS, so the back is not mirrored. */
.simple-card-3d.flip-turning,
.preview-card.flip-turning,
.full-card-wrap.flip-turning{
  animation:v35CardSpinFlip .64s cubic-bezier(.22,.78,.2,1) both !important;
  transform-origin:center center !important;
  transform-style:preserve-3d !important;
  will-change:transform !important;
  pointer-events:none !important;
}
@keyframes v35CardSpinFlip{
  0%{ transform:translate3d(var(--drag-x,0px),var(--drag-y,0px),0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(1); }
  42%{ transform:translate3d(var(--drag-x,0px),var(--drag-y,0px),0) rotateX(0deg) rotateY(88deg) scale(.985); }
  50%{ transform:translate3d(var(--drag-x,0px),var(--drag-y,0px),0) rotateX(0deg) rotateY(90deg) scale(.975); }
  58%{ transform:translate3d(var(--drag-x,0px),var(--drag-y,0px),0) rotateX(0deg) rotateY(88deg) scale(.985); }
  100%{ transform:translate3d(var(--drag-x,0px),var(--drag-y,0px),0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(1); }
}
.simple-card-3d.flip-turning img,
.preview-card.flip-turning img,
.full-card-wrap.flip-turning img{
  transform:none !important;
  scale:1 !important;
  filter:none !important;
}

/* =========================================================
   V36: smoother binder card hover, one-shot hover SFX support,
   and cleaner binder bottom shadow/pagination spacing.
   ========================================================= */
.binder-book {
  overflow: visible !important;
  margin-bottom: 10px !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -12px 22px rgba(128,92,72,.08),
    inset 0 0 0 4px rgba(255,255,255,.52),
    0 18px 44px rgba(8,39,125,.18) !important;
}
.pager {
  position: relative !important;
  z-index: 60 !important;
  margin-top: 18px !important;
  padding-top: 2px !important;
}
.pager button {
  position: relative !important;
  z-index: 65 !important;
  box-shadow: 0 8px 18px rgba(255,120,189,.20) !important;
}
.slot:not(.empty-slot) {
  overflow: visible !important;
  animation: v36SlotBreath 6.2s ease-in-out infinite !important;
  transform-origin: center center !important;
}
.binder-page .slot:nth-child(2n){ animation-delay:.45s !important; }
.binder-page .slot:nth-child(3n){ animation-delay:.95s !important; }
.binder-page .slot:nth-child(5n){ animation-delay:1.45s !important; }
@keyframes v36SlotBreath {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(.1deg); }
}
.card-tile {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  isolation: isolate !important;
  perspective: 1100px !important;
  transform-style: preserve-3d !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
.card-tile .card-inner {
  transform:
    translate3d(0,0,0)
    rotateX(var(--tilt-x,0deg))
    rotateY(var(--tilt-y,0deg))
    scale(1) !important;
  transform-origin: center center !important;
  transform-style: preserve-3d !important;
  transition:
    transform .26s cubic-bezier(.16,.9,.24,1),
    filter .24s ease !important;
  will-change: transform !important;
  filter: none !important;
}
.card-tile:hover,
.card-tile.tilting,
.card-tile:focus-visible {
  z-index: 120 !important;
}
.card-tile:hover .card-inner,
.card-tile.tilting .card-inner,
.card-tile:focus-visible .card-inner {
  transform:
    translate3d(0,-17px,24px)
    rotateX(var(--tilt-x,0deg))
    rotateY(var(--tilt-y,0deg))
    scale(1.015) !important;
  filter: drop-shadow(0 22px 28px rgba(8,39,125,.26)) !important;
}
.card-tile .face {
  transition: box-shadow .24s ease, filter .24s ease !important;
  filter: none !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}
.card-tile:hover .face,
.card-tile.tilting .face,
.card-tile:focus-visible .face {
  box-shadow:
    0 14px 30px rgba(21,91,216,.20),
    0 0 0 2px rgba(255,255,255,.92),
    0 0 26px rgba(255,120,189,.34),
    0 0 44px rgba(114,207,255,.18) !important;
}
.card-tile:hover::after,
.card-tile.tilting::after,
.card-tile:hover .face::before,
.card-tile:hover .face::after,
.card-tile.tilting .face::before,
.card-tile.tilting .face::after,
.card-tile:hover .card-inner::before,
.card-tile:hover .card-inner::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}
.card-tile img,
.card-tile:hover img,
.card-tile.tilting img,
.card-tile:focus-visible img {
  transform: none !important;
  scale: 1 !important;
  image-rendering: auto !important;
}
.card-tile img:not(.obscured),
.card-tile:hover img:not(.obscured),
.card-tile.tilting img:not(.obscured) {
  filter: none !important;
}
.card-tile img.obscured,
.card-tile:hover img.obscured,
.card-tile.tilting img.obscured {
  filter: brightness(.78) saturate(.9) blur(.35px) !important;
}
.slot .tiny-reveal,
.tiny-reveal {
  z-index: 180 !important;
}

/* V37: restored clean binder-card interaction and stable hover SFX behavior. */
.binder-book,
.binder-page,
.slot {
  overflow: visible !important;
}

.slot {
  position: relative !important;
  z-index: 1;
  transform-style: preserve-3d;
}

.slot:hover,
.slot:focus-within {
  z-index: 120 !important;
}

.card-tile {
  transform-style: preserve-3d !important;
  perspective: 1100px !important;
  animation: v37SlotBreath 5.6s ease-in-out infinite !important;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.slot:nth-child(2n) .card-tile { animation-delay: .35s !important; }
.slot:nth-child(3n) .card-tile { animation-delay: .72s !important; }
.slot:nth-child(5n) .card-tile { animation-delay: 1.05s !important; }

@keyframes v37SlotBreath {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  35% { transform: translateY(-1.5px) rotateZ(.25deg); }
  70% { transform: translateY(1px) rotateZ(-.18deg); }
}

.card-tile .card-inner {
  transform-style: preserve-3d !important;
  transition:
    transform .28s cubic-bezier(.2,.9,.22,1),
    filter .24s ease,
    box-shadow .24s ease !important;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0,0,0) rotateX(0deg) rotateY(0deg) !important;
}

.card-tile:hover .card-inner,
.card-tile.tilting .card-inner,
.card-tile:focus-visible .card-inner {
  transform:
    translate3d(0,-15px,38px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    rotateZ(-.4deg)
    scale(1) !important;
  filter:
    drop-shadow(0 20px 24px rgba(8,39,125,.22))
    drop-shadow(0 0 18px rgba(255,120,189,.28))
    brightness(1.055)
    saturate(1.045) !important;
  animation: v37PopWobble .52s cubic-bezier(.18,.95,.22,1) both;
}

@keyframes v37PopWobble {
  0% {
    transform: translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
  }
  42% {
    transform: translate3d(0,-18px,42px) rotateX(calc(var(--tilt-x, 0deg) * .75)) rotateY(calc(var(--tilt-y, 0deg) * .75)) rotateZ(1.1deg) scale(1);
  }
  72% {
    transform: translate3d(0,-13px,38px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) rotateZ(-.7deg) scale(1);
  }
  100% {
    transform: translate3d(0,-15px,38px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) rotateZ(-.4deg) scale(1);
  }
}

.card-tile:hover .face,
.card-tile.tilting .face,
.card-tile:focus-visible .face {
  box-shadow:
    0 0 0 2px rgba(255,255,255,.96),
    0 14px 30px rgba(13,60,148,.20),
    0 0 24px rgba(255,120,189,.34),
    inset 0 0 18px rgba(255,255,255,.18) !important;
}

.card-tile:hover::after,
.card-tile:hover .face::after,
.card-tile:hover .front::after,
.card-tile:hover .card-inner::after,
.card-tile:hover .card-inner::before,
.card-tile:hover .face::before,
.slot:hover::before,
.slot:hover::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

/* Keep pagination visually above the binder's page shadow. */
.pager {
  position: relative !important;
  z-index: 30 !important;
  margin-top: 10px !important;
}
.binder-wrap::after,
.binder-book::after {
  pointer-events: none !important;
}

/* =========================================================
   V38: reset binder thumbnail hover and rebuild as CSS-only.
   This removes pointer-move tilt from binder cards, fixes SFX
   retriggers, and creates a clean pop-up wobble from the sleeve.
   ========================================================= */
.binder-book,
.binder-page,
.slot {
  overflow: visible !important;
}

.slot {
  position: relative !important;
  z-index: 1 !important;
  transform-style: preserve-3d !important;
  isolation: isolate;
}
.slot:hover,
.slot:focus-within {
  z-index: 180 !important;
}

.card-tile {
  --tilt-x: 0deg !important;
  --tilt-y: 0deg !important;
  position: relative !important;
  z-index: 20 !important;
  overflow: visible !important;
  perspective: 1000px !important;
  transform-style: preserve-3d !important;
  transform: translate3d(0,0,0) !important;
  transition: none !important;
  filter: none !important;
  animation: v38BinderIdle 5.8s ease-in-out infinite !important;
  backface-visibility: hidden !important;
}
.slot:nth-child(2n) .card-tile { animation-delay: .35s !important; }
.slot:nth-child(3n) .card-tile { animation-delay: .72s !important; }
.slot:nth-child(5n) .card-tile { animation-delay: 1.08s !important; }

@keyframes v38BinderIdle {
  0%, 100% { transform: translate3d(0,0,0) rotateZ(0deg) !important; }
  45% { transform: translate3d(0,-2px,0) rotateZ(.18deg) !important; }
  72% { transform: translate3d(0,1px,0) rotateZ(-.12deg) !important; }
}

.card-tile .card-inner {
  transform: translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1) !important;
  transform-origin: center center !important;
  transform-style: preserve-3d !important;
  transition:
    transform .34s cubic-bezier(.18,.92,.22,1),
    filter .26s ease !important;
  will-change: transform !important;
  filter: none !important;
  animation: none !important;
  backface-visibility: hidden !important;
}

.card-tile:hover .card-inner,
.card-tile:focus-visible .card-inner {
  transform: translate3d(0,-18px,34px) rotateX(5deg) rotateY(-5deg) rotateZ(-.65deg) scale(1) !important;
  filter: drop-shadow(0 22px 26px rgba(8,39,125,.24)) brightness(1.045) saturate(1.04) !important;
  animation: v38CardPop .56s cubic-bezier(.16,.96,.24,1) both !important;
}

@keyframes v38CardPop {
  0% { transform: translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); }
  38% { transform: translate3d(0,-22px,38px) rotateX(6deg) rotateY(-6deg) rotateZ(1.25deg) scale(1); }
  66% { transform: translate3d(0,-15px,34px) rotateX(4deg) rotateY(-4deg) rotateZ(-1deg) scale(1); }
  100% { transform: translate3d(0,-18px,34px) rotateX(5deg) rotateY(-5deg) rotateZ(-.65deg) scale(1); }
}

.card-tile .face {
  overflow: hidden !important;
  transition: box-shadow .24s ease, filter .24s ease !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  filter: none !important;
}
.card-tile:hover .face,
.card-tile:focus-visible .face {
  box-shadow:
    0 0 0 2px rgba(255,255,255,.98),
    0 14px 30px rgba(13,60,148,.20),
    0 0 26px rgba(255,120,189,.34),
    0 0 42px rgba(114,207,255,.16),
    inset 0 0 18px rgba(255,255,255,.18) !important;
}

.card-tile img,
.card-tile:hover img,
.card-tile:focus-visible img {
  transform: none !important;
  scale: 1 !important;
  image-rendering: auto !important;
}
.card-tile img:not(.obscured),
.card-tile:hover img:not(.obscured),
.card-tile:focus-visible img:not(.obscured) {
  filter: none !important;
}
.card-tile img.obscured,
.card-tile:hover img.obscured,
.card-tile:focus-visible img.obscured {
  filter: brightness(.78) saturate(.9) blur(.35px) !important;
}

.card-tile:hover::after,
.card-tile:focus-visible::after,
.card-tile:hover .face::before,
.card-tile:hover .face::after,
.card-tile:focus-visible .face::before,
.card-tile:focus-visible .face::after,
.card-tile:hover .card-inner::before,
.card-tile:hover .card-inner::after,
.slot:hover::before,
.slot:hover::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

.slot .tiny-reveal,
.tiny-reveal {
  z-index: 260 !important;
  pointer-events: auto !important;
}


/* V39: Binder thumbnails intentionally have NO hover/tilt/wobble interaction.
   This only affects cards inside the binder view; buttons and click actions still work. */
body[data-page="binder"] .binder-book .card-tile,
body[data-page="binder"] .binder-book .card-tile .card-inner,
body[data-page="binder"] .binder-book .card-tile .face,
body[data-page="binder"] .binder-book .card-tile img {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}
body[data-page="binder"] .binder-book .card-tile:hover,
body[data-page="binder"] .binder-book .card-tile:hover .card-inner,
body[data-page="binder"] .binder-book .card-tile:hover .face,
body[data-page="binder"] .binder-book .card-tile:hover img,
body[data-page="binder"] .binder-book .card-tile.tilting,
body[data-page="binder"] .binder-book .card-tile.tilting .card-inner,
body[data-page="binder"] .binder-book .card-tile.tilting .face,
body[data-page="binder"] .binder-book .card-tile.tap-tilt .card-inner {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}
body[data-page="binder"] .binder-book .card-tile::before,
body[data-page="binder"] .binder-book .card-tile::after,
body[data-page="binder"] .binder-book .card-tile .face::before,
body[data-page="binder"] .binder-book .card-tile .face::after {
  content: none !important;
  display: none !important;
}
body[data-page="binder"] .binder-book .card-tile .tiny-reveal,
body[data-page="binder"] .binder-book .card-tile .mini-actions,
body[data-page="binder"] .binder-book .card-tile button {
  transform: none !important;
  animation: none !important;
}

/* V43: Pastel magical binder presentation update.
   Keeps the current white/girly theme while giving binder cards a gentle
   floating-card-in-sleeve feel. This is CSS-only for stability. */
body[data-page="binder"] .binder-wrap {
  overflow: visible !important;
}

body[data-page="binder"] .binder-book {
  overflow: visible !important;
  background:
    radial-gradient(circle at 8% 10%, rgba(255, 139, 202, .20), transparent 26%),
    radial-gradient(circle at 92% 18%, rgba(114, 207, 255, .18), transparent 28%),
    linear-gradient(90deg, #fff6fb 0%, #fffdf8 48%, #fff6fb 100%) !important;
  border: 2px solid rgba(255,255,255,.95) !important;
  box-shadow:
    0 22px 48px rgba(37, 75, 158, .16),
    0 8px 0 rgba(214, 185, 173, .38),
    inset 0 0 0 3px rgba(255, 210, 232, .70),
    inset 0 0 45px rgba(255,255,255,.72) !important;
  transform-style: preserve-3d !important;
}

body[data-page="binder"] .binder-book::after {
  content: "" !important;
  display: block !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 8px !important;
  pointer-events: none !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 139, 202, .28) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 30%, rgba(255, 202, 74, .34) 0 2px, transparent 3px),
    radial-gradient(circle at 34% 82%, rgba(114, 207, 255, .26) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 78%, rgba(255, 139, 202, .22) 0 1px, transparent 3px) !important;
  background-size: 110px 120px, 150px 130px, 130px 140px, 95px 105px !important;
  animation: binderSparkleDrift 7s ease-in-out infinite !important;
  z-index: 0 !important;
}

body[data-page="binder"] .binder-page {
  overflow: visible !important;
  position: relative !important;
  z-index: 3 !important;
  padding: 12px !important;
  border: 1px solid rgba(255, 160, 206, .34) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,246,251,.72)),
    radial-gradient(circle at 50% 0%, rgba(114,207,255,.12), transparent 45%) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.85),
    inset 0 0 24px rgba(255, 190, 224, .20),
    0 12px 26px rgba(37, 75, 158, .10) !important;
}

body[data-page="binder"] .binder-book:before {
  z-index: 5 !important;
  background: linear-gradient(90deg, #d3c3bd, #ffffff 32%, #f6d9e3 52%, #ffffff 70%, #c8b8b3) !important;
  box-shadow:
    0 0 0 1px rgba(151, 114, 122, .22),
    0 0 18px rgba(255, 139, 202, .18),
    inset 0 0 8px rgba(87, 54, 62, .10) !important;
}

body[data-page="binder"] .ring {
  z-index: 7 !important;
  border-color: #c69aa0 !important;
  background: linear-gradient(180deg, #fff5f8, #ffc7d9 55%, #d99aa7) !important;
  box-shadow:
    0 4px 9px rgba(83, 41, 60, .20),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body[data-page="binder"] .slot:not(.empty-slot) {
  overflow: visible !important;
  position: relative !important;
  z-index: 4 !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,232,244,.48)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.95),
    inset 0 -8px 18px rgba(255, 139, 202, .12),
    0 8px 18px rgba(37, 75, 158, .10) !important;
  animation: binderSlotFloat 5.8s ease-in-out infinite !important;
  animation-delay: calc(var(--float-delay, 0) * .3s) !important;
}
body[data-page="binder"] .slot:nth-child(2n){ --float-delay: 1; }
body[data-page="binder"] .slot:nth-child(3n){ --float-delay: 2; }
body[data-page="binder"] .slot:nth-child(4n){ --float-delay: 3; }
body[data-page="binder"] .slot:nth-child(5n){ --float-delay: 4; }

body[data-page="binder"] .slot:not(.empty-slot)::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -10px !important;
  border-radius: 22px !important;
  pointer-events: none !important;
  z-index: -1 !important;
  opacity: .42 !important;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 139, 202, .50) 0 2px, transparent 4px),
    radial-gradient(circle at 82% 18%, rgba(255, 205, 80, .54) 0 2px, transparent 4px),
    radial-gradient(circle at 72% 82%, rgba(114, 207, 255, .46) 0 2px, transparent 4px),
    radial-gradient(circle at 35% 90%, rgba(255,255,255,.86) 0 1px, transparent 4px) !important;
  filter: blur(.1px) !important;
  animation: sleeveMagicTwinkle 4.5s ease-in-out infinite !important;
}

body[data-page="binder"] .card-tile {
  overflow: visible !important;
  position: relative !important;
  z-index: 5 !important;
  transform: none !important;
  filter: none !important;
  will-change: transform !important;
}

body[data-page="binder"] .card-tile .card-inner {
  animation: starlightCardDrift 4.9s ease-in-out infinite !important;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), filter .24s ease !important;
  transform-origin: center center !important;
  will-change: transform, filter !important;
  filter: drop-shadow(0 8px 12px rgba(37, 75, 158, .14)) !important;
}

body[data-page="binder"] .card-tile:hover,
body[data-page="binder"] .card-tile:focus-visible {
  z-index: 120 !important;
}

body[data-page="binder"] .slot:not(.empty-slot):hover {
  z-index: 120 !important;
}

body[data-page="binder"] .card-tile:hover .card-inner,
body[data-page="binder"] .card-tile:focus-visible .card-inner {
  animation: starlightCardHoverWobble 1.1s ease-in-out infinite alternate !important;
  transform: translateY(-15px) rotateZ(-1deg) !important;
  filter:
    drop-shadow(0 20px 24px rgba(37, 75, 158, .22))
    drop-shadow(0 0 16px rgba(255, 123, 196, .28)) !important;
}

body[data-page="binder"] .card-tile:hover .face,
body[data-page="binder"] .card-tile:focus-visible .face {
  box-shadow:
    0 0 0 2px rgba(255,255,255,.98),
    0 0 16px rgba(255,120,189,.34),
    0 0 22px rgba(114,207,255,.22),
    0 14px 24px rgba(37,75,158,.18) !important;
}

body[data-page="binder"] .card-tile:hover .face::after,
body[data-page="binder"] .card-tile:focus-visible .face::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: .78 !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 24% 16%, rgba(255,255,255,.56), transparent 18%),
    linear-gradient(135deg, rgba(255,255,255,.28), transparent 42%, rgba(255,139,202,.18)) !important;
  mix-blend-mode: screen !important;
  animation: none !important;
}

body[data-page="binder"] .card-tile img,
body[data-page="binder"] .card-tile:hover img,
body[data-page="binder"] .card-tile:focus-visible img {
  transform: none !important;
  scale: 1 !important;
  image-rendering: auto !important;
}

body[data-page="binder"] .card-tile img:not(.obscured),
body[data-page="binder"] .card-tile:hover img:not(.obscured),
body[data-page="binder"] .card-tile:focus-visible img:not(.obscured) {
  filter: none !important;
}

body[data-page="binder"] .card-tile img.obscured,
body[data-page="binder"] .card-tile:hover img.obscured,
body[data-page="binder"] .card-tile:focus-visible img.obscured {
  filter: brightness(.78) saturate(.9) blur(.35px) !important;
}

body[data-page="binder"] .rarity-common .face { box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 0 12px rgba(180,190,205,.22), 0 8px 16px rgba(37,75,158,.13) !important; }
body[data-page="binder"] .rarity-uncommon .face { box-shadow: 0 0 0 2px rgba(155,213,255,.85), 0 0 14px rgba(84,169,255,.28), 0 8px 16px rgba(37,75,158,.13) !important; }
body[data-page="binder"] .rarity-rare .face { box-shadow: 0 0 0 2px rgba(255,195,119,.92), 0 0 16px rgba(255,170,70,.30), 0 8px 16px rgba(37,75,158,.13) !important; }
body[data-page="binder"] .rarity-epic .face { box-shadow: 0 0 0 2px rgba(255,148,211,.88), 0 0 18px rgba(255,111,194,.32), 0 8px 16px rgba(37,75,158,.13) !important; }
body[data-page="binder"] .rarity-legendary .face { box-shadow: 0 0 0 2px rgba(255,203,72,.98), 0 0 20px rgba(255,193,47,.42), 0 10px 20px rgba(255,183,39,.20) !important; }

body[data-page="binder"] .tiny-reveal {
  z-index: 300 !important;
  bottom: 8px !important;
}
body[data-page="binder"] .slot:hover .tiny-reveal {
  box-shadow: 0 0 0 5px rgba(255,120,189,.16), 0 10px 18px rgba(255,79,167,.28) !important;
}

@keyframes binderSparkleDrift {
  0%, 100% { transform: translateY(0); opacity: .56; }
  50% { transform: translateY(-6px); opacity: .90; }
}
@keyframes binderSlotFloat {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  45% { transform: translateY(-2px) rotateZ(.25deg); }
  70% { transform: translateY(1px) rotateZ(-.18deg); }
}
@keyframes sleeveMagicTwinkle {
  0%, 100% { opacity: .28; transform: scale(.98); }
  45% { opacity: .64; transform: scale(1.015); }
  70% { opacity: .42; }
}
@keyframes starlightCardDrift {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  40% { transform: translateY(-3px) rotateZ(.45deg); }
  72% { transform: translateY(1px) rotateZ(-.35deg); }
}
@keyframes starlightCardHoverWobble {
  0% { transform: translateY(-14px) rotateZ(-1.25deg); }
  50% { transform: translateY(-18px) rotateZ(1deg); }
  100% { transform: translateY(-15px) rotateZ(-.45deg); }
}

/* ==========================================================
   V44 — Pastel Magic Binder Effects
   - Pure CSS only: no JS mouse tracking, no SFX spam, no blur
   - Cards float slightly outside their sleeves
   - Hover pops card cleanly upward with a soft wobble/glow
   - Keeps current white/girly theme and existing full/reveal views
   ========================================================== */
body[data-page="binder"] .binder-book,
body[data-page="binder"] .binder-page,
body[data-page="binder"] .slot {
  overflow: visible !important;
}

body[data-page="binder"] .binder-book {
  position: relative !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 10% 12%, rgba(255, 148, 211, .20), transparent 24%),
    radial-gradient(circle at 88% 16%, rgba(255, 211, 94, .18), transparent 26%),
    linear-gradient(90deg, #fff7fb 0%, #fffefa 48%, #fff7fb 100%) !important;
  box-shadow:
    0 26px 62px rgba(31, 72, 156, .18),
    0 9px 0 rgba(218, 196, 188, .45),
    inset 0 0 0 3px rgba(255, 221, 236, .95),
    inset 0 18px 38px rgba(255,255,255,.72),
    inset 0 -20px 44px rgba(227, 200, 191, .22) !important;
}

body[data-page="binder"] .binder-book::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 6px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: 24px !important;
  opacity: .85 !important;
  background:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.95) 0 1px, transparent 3px),
    radial-gradient(circle at 30% 72%, rgba(255, 139, 202, .55) 0 1px, transparent 4px),
    radial-gradient(circle at 57% 18%, rgba(255, 207, 87, .60) 0 1px, transparent 4px),
    radial-gradient(circle at 82% 68%, rgba(114, 207, 255, .52) 0 1px, transparent 4px),
    radial-gradient(circle at 92% 30%, rgba(255,255,255,.9) 0 1px, transparent 3px) !important;
  background-size: 92px 110px, 135px 130px, 150px 120px, 125px 145px, 80px 105px !important;
  animation: v44BinderSparkles 8s ease-in-out infinite !important;
}

body[data-page="binder"] .binder-page {
  position: relative !important;
  z-index: 3 !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 164, 207, .38) !important;
  border-radius: 25px !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.74), transparent 62%),
    linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,244,250,.76)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.94),
    inset 0 0 28px rgba(255, 183, 222, .18),
    0 12px 30px rgba(26, 74, 160, .10) !important;
}

body[data-page="binder"] .binder-page::after {
  content: "✦" !important;
  position: absolute !important;
  inset: auto 18px 12px auto !important;
  font-size: 42px !important;
  line-height: 1 !important;
  color: rgba(229, 133, 185, .10) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.75) !important;
  pointer-events: none !important;
}

body[data-page="binder"] .slot:not(.empty-slot) {
  position: relative !important;
  z-index: 5 !important;
  overflow: visible !important;
  padding: 8px 8px 44px !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,233,245,.54)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.92),
    inset 0 -10px 18px rgba(255, 139, 202, .12),
    0 9px 18px rgba(37, 75, 158, .09) !important;
}

body[data-page="binder"] .slot:not(.empty-slot)::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -12px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 24px !important;
  opacity: .42 !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 119, 190, .52) 0 2px, transparent 4px),
    radial-gradient(circle at 78% 22%, rgba(255, 211, 89, .55) 0 2px, transparent 4px),
    radial-gradient(circle at 72% 82%, rgba(116, 211, 255, .45) 0 2px, transparent 5px),
    radial-gradient(circle at 34% 86%, rgba(255,255,255,.95) 0 1px, transparent 4px) !important;
  filter: blur(.15px) !important;
  animation: v44SlotAura 5.6s ease-in-out infinite !important;
}

body[data-page="binder"] .slot:not(.empty-slot)::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 7px 7px 43px 7px !important;
  border-radius: 14px !important;
  pointer-events: none !important;
  z-index: 1 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.78),
    inset 0 0 22px rgba(255,255,255,.42) !important;
}

body[data-page="binder"] .slot:nth-child(2n)::before { animation-delay: .45s !important; }
body[data-page="binder"] .slot:nth-child(3n)::before { animation-delay: .95s !important; }
body[data-page="binder"] .slot:nth-child(4n)::before { animation-delay: 1.35s !important; }
body[data-page="binder"] .slot:nth-child(5n)::before { animation-delay: 1.8s !important; }

body[data-page="binder"] .card-tile {
  position: relative !important;
  z-index: 10 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: calc(100% - 36px) !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  cursor: pointer !important;
}

body[data-page="binder"] .card-inner {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  transform: translateY(-3px) rotateZ(var(--v44-rot, 0deg)) !important;
  transform-origin: center bottom !important;
  animation: v44CardFloat 5.2s ease-in-out infinite !important;
  transition: filter .22s ease, transform .22s ease !important;
  will-change: transform, filter !important;
  filter: drop-shadow(0 10px 12px rgba(32, 74, 160, .14)) !important;
}
body[data-page="binder"] .slot:nth-child(2n) .card-inner { --v44-rot: .45deg; animation-delay: .55s !important; }
body[data-page="binder"] .slot:nth-child(3n) .card-inner { --v44-rot: -.45deg; animation-delay: 1.05s !important; }
body[data-page="binder"] .slot:nth-child(4n) .card-inner { --v44-rot: .25deg; animation-delay: 1.55s !important; }
body[data-page="binder"] .slot:nth-child(5n) .card-inner { --v44-rot: -.25deg; animation-delay: 2.05s !important; }

body[data-page="binder"] .card-tile:hover,
body[data-page="binder"] .card-tile:focus-visible,
body[data-page="binder"] .slot:hover,
body[data-page="binder"] .slot:focus-within {
  z-index: 220 !important;
}

body[data-page="binder"] .card-tile:hover .card-inner,
body[data-page="binder"] .card-tile:focus-visible .card-inner {
  animation: v44CardHoverWobble 1.25s ease-in-out infinite !important;
  transform: translateY(-18px) rotateZ(-1.4deg) !important;
  filter:
    drop-shadow(0 22px 22px rgba(32, 74, 160, .20))
    drop-shadow(0 0 18px rgba(255, 117, 189, .30))
    drop-shadow(0 0 18px rgba(119, 210, 255, .18)) !important;
}

body[data-page="binder"] .face {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.95),
    0 0 10px rgba(255, 143, 203, .18),
    0 8px 14px rgba(32, 74, 160, .14) !important;
}

body[data-page="binder"] .card-tile:hover .face,
body[data-page="binder"] .card-tile:focus-visible .face {
  box-shadow:
    0 0 0 2px rgba(255,255,255,1),
    0 0 16px rgba(255, 117, 189, .36),
    0 0 22px rgba(119, 210, 255, .20),
    0 14px 22px rgba(32, 74, 160, .18) !important;
}

body[data-page="binder"] .card-tile:hover .face::after,
body[data-page="binder"] .card-tile:focus-visible .face::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  opacity: .58 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.62), transparent 20%),
    linear-gradient(135deg, rgba(255,255,255,.20), transparent 48%, rgba(255,139,202,.12)) !important;
  animation: none !important;
}

body[data-page="binder"] .card-tile img,
body[data-page="binder"] .card-tile:hover img,
body[data-page="binder"] .card-tile:focus-visible img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  transform: none !important;
  scale: 1 !important;
  image-rendering: auto !important;
}

body[data-page="binder"] .card-tile img:not(.obscured),
body[data-page="binder"] .card-tile:hover img:not(.obscured),
body[data-page="binder"] .card-tile:focus-visible img:not(.obscured) {
  filter: none !important;
}
body[data-page="binder"] .card-tile img.obscured,
body[data-page="binder"] .card-tile:hover img.obscured,
body[data-page="binder"] .card-tile:focus-visible img.obscured {
  filter: brightness(.78) saturate(.9) blur(.35px) !important;
}

body[data-page="binder"] .slot .tiny-reveal {
  z-index: 500 !important;
  bottom: 7px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
}
body[data-page="binder"] .slot .tiny-reveal:hover,
body[data-page="binder"] .slot .tiny-reveal:focus-visible {
  transform: translateX(-50%) translateY(-2px) scale(1.04) !important;
}
body[data-page="binder"] .slot:hover .tiny-reveal,
body[data-page="binder"] .slot:focus-within .tiny-reveal {
  bottom: 7px !important;
}

body[data-page="binder"] .empty-slot {
  background:
    linear-gradient(145deg, rgba(255,255,255,.44), rgba(255,235,246,.22)) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55) !important;
}

@keyframes v44BinderSparkles {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(-7px); opacity: .94; }
}
@keyframes v44SlotAura {
  0%, 100% { opacity: .26; transform: scale(.985) rotate(0deg); }
  45% { opacity: .60; transform: scale(1.018) rotate(.35deg); }
  70% { opacity: .38; transform: scale(1.004) rotate(-.2deg); }
}
@keyframes v44CardFloat {
  0%, 100% { transform: translateY(-3px) rotateZ(var(--v44-rot, 0deg)); }
  42% { transform: translateY(-8px) rotateZ(calc(var(--v44-rot, 0deg) + .45deg)); }
  72% { transform: translateY(-1px) rotateZ(calc(var(--v44-rot, 0deg) - .32deg)); }
}
@keyframes v44CardHoverWobble {
  0% { transform: translateY(-17px) rotateZ(-1.5deg); }
  45% { transform: translateY(-21px) rotateZ(1.1deg); }
  100% { transform: translateY(-18px) rotateZ(-.65deg); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="binder"] .card-inner,
  body[data-page="binder"] .slot::before,
  body[data-page="binder"] .binder-book::after {
    animation: none !important;
  }
}


/* =========================================================
   V45 Binder Interaction Rebuild
   Goal: strip out the conflicting pointer tilt/mouse-follow systems
   for binder thumbnails and replace them with a simple, stable,
   magical idle float + clean hover pop/wobble.
   ========================================================= */

.binder-book,
.binder-page,
.slot {
  overflow: visible !important;
}

.binder-page {
  position: relative;
  isolation: isolate;
}

.slot:not(.empty-slot) {
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  will-change: transform, filter;
  animation: v45SlotFloat 5.4s ease-in-out infinite;
  animation-delay: calc((var(--slot-i, 0) % 6) * -0.42s);
  transition: z-index 0s linear, filter .22s ease;
}

.slot:not(.empty-slot)::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 18px;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.65), transparent 18%),
    radial-gradient(circle at 86% 22%, rgba(255,120,189,.26), transparent 20%),
    radial-gradient(circle at 50% 104%, rgba(114,207,255,.20), transparent 32%);
  opacity: .26;
  filter: blur(5px);
  transition: opacity .22s ease, filter .22s ease;
}

.slot:not(.empty-slot)::after {
  content: "✦";
  position: absolute;
  right: 7px;
  top: 7px;
  z-index: 12;
  pointer-events: none;
  color: rgba(255,120,189,.78);
  text-shadow: 0 0 8px rgba(255,120,189,.55), 0 0 14px rgba(255,255,255,.8);
  font-size: 15px;
  opacity: .7;
  animation: v45SparklePulse 2.8s ease-in-out infinite;
}

.slot .card-tile {
  position: relative;
  z-index: 8;
  transform-origin: center bottom;
  transition: transform .28s cubic-bezier(.2,.85,.2,1), filter .28s ease;
  will-change: transform, filter;
  transform: translate3d(0,0,0) rotate(0deg) !important;
}

/* Neutralize all old binder pointer-tilt/mouse-tracking transform rules. */
.slot .card-inner,
.slot .card-tile:hover .card-inner,
.slot .card-tile.tilting .card-inner,
.slot .card-tile.tap-tilt .card-inner,
.slot:hover .card-inner {
  transform: none !important;
  transition: none !important;
}

.slot .card-tile.tilting,
.slot .card-tile.tap-tilt {
  --tilt-x: 0deg !important;
  --tilt-y: 0deg !important;
}

.slot .face,
.slot .card-tile:hover .face,
.slot .card-tile.tilting .face {
  filter: none !important;
  transform: none !important;
  transition: box-shadow .28s ease, filter .28s ease;
  box-shadow:
    0 7px 14px rgba(13,60,148,.16),
    0 0 10px rgba(255,160,210,.18) !important;
}

.slot .face::after,
.slot .front::after,
.slot .back::after,
.slot .card-inner::before,
.slot .card-tile::after,
.slot .card-tile:hover::after,
.slot .card-tile:hover .face::after,
.slot .card-tile:hover .front::after,
.slot .card-tile:hover .card-inner::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

.slot:not(.empty-slot):hover,
.slot:not(.empty-slot):focus-within {
  z-index: 90;
  filter: drop-shadow(0 22px 30px rgba(255, 120, 189, .18));
}

.slot:not(.empty-slot):hover::before,
.slot:not(.empty-slot):focus-within::before {
  opacity: .9;
  filter: blur(8px);
}

.slot:not(.empty-slot):hover .card-tile,
.slot:not(.empty-slot):focus-within .card-tile {
  transform: translate3d(0,-16px,24px) rotate(-1.2deg) !important;
  animation: v45CardWobble 1.75s ease-in-out infinite;
  filter: drop-shadow(0 20px 20px rgba(10,45,125,.22)) drop-shadow(0 0 12px rgba(255,120,189,.28));
}

.slot:not(.empty-slot):hover .face,
.slot:not(.empty-slot):focus-within .face {
  box-shadow:
    0 14px 26px rgba(13,60,148,.20),
    0 0 0 2px rgba(255,255,255,.86),
    0 0 18px rgba(255,120,189,.42),
    0 0 28px rgba(114,207,255,.22) !important;
}

/* Keep reveal/collected buttons above the sleeve, so the lifted card never eats the button. */
.slot .tiny-reveal {
  position: relative;
  z-index: 120 !important;
  transform: translateZ(35px);
}

.slot:hover .tiny-reveal,
.slot:focus-within .tiny-reveal {
  filter: brightness(1.06);
}

@keyframes v45SlotFloat {
  0%, 100% { transform: translate3d(0,0,0) rotate(-.18deg); }
  50% { transform: translate3d(0,-3px,0) rotate(.18deg); }
}

@keyframes v45CardWobble {
  0%, 100% { transform: translate3d(0,-16px,24px) rotate(-1.2deg); }
  38% { transform: translate3d(0,-19px,24px) rotate(.85deg); }
  72% { transform: translate3d(0,-15px,24px) rotate(-.45deg); }
}

@keyframes v45SparklePulse {
  0%,100% { opacity:.45; transform: scale(.92) rotate(0deg); }
  50% { opacity:1; transform: scale(1.12) rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
  .slot:not(.empty-slot),
  .slot:not(.empty-slot)::after,
  .slot:not(.empty-slot):hover .card-tile,
  .slot:not(.empty-slot):focus-within .card-tile {
    animation: none !important;
  }
}


/* ================================
   V46 Binder Interaction Reset
   Binder thumbnails only: rebuilt from scratch to remove ghost layers,
   pointer-tracking jitter, blur, scale conflicts, and transform stacking.
   ================================ */
.binder-book,
.binder-book .binder-page,
.binder-book .slot {
  overflow: visible !important;
}

.binder-book .binder-page {
  perspective: none !important;
}

.binder-book .slot {
  position: relative !important;
  z-index: 1 !important;
  padding: 5px !important;
  aspect-ratio: 2.5 / 3.5 !important;
  transform: none !important;
  animation: none !important;
  filter: none !important;
}

.binder-book .slot:not(.empty-slot) {
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.88),
    inset 0 10px 22px rgba(95, 132, 210, .10),
    0 7px 14px rgba(84, 122, 190, .10) !important;
}

.binder-book .slot:hover,
.binder-book .slot:focus-within {
  z-index: 60 !important;
}

.binder-book .slot::before,
.binder-book .slot::after,
.binder-book .card-tile::before,
.binder-book .card-tile::after,
.binder-book .card-inner::before,
.binder-book .card-inner::after,
.binder-book .face::before,
.binder-book .face::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

.binder-book .card-tile {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  cursor: pointer !important;
  perspective: none !important;
  transform-style: flat !important;
  transform-origin: center center !important;
  animation: v46CardFloat 5.2s ease-in-out infinite !important;
  animation-delay: calc(var(--slot-i, 0) * -0.17s) !important;
  transition:
    transform .30s cubic-bezier(.2,.9,.22,1),
    filter .30s ease !important;
  will-change: transform, filter !important;
}

.binder-book .binder-page .slot:nth-child(2n) .card-tile { animation-duration: 5.7s !important; }
.binder-book .binder-page .slot:nth-child(3n) .card-tile { animation-duration: 4.9s !important; }
.binder-book .binder-page .slot:nth-child(5n) .card-tile { animation-duration: 6.1s !important; }

.binder-book .card-inner {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  transition: none !important;
  filter: none !important;
  transform-style: flat !important;
  backface-visibility: visible !important;
}

.binder-book .face {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transform: none !important;
  backface-visibility: visible !important;
  filter: none !important;
  box-shadow:
    0 8px 15px rgba(25, 73, 160, .14),
    0 0 0 1px rgba(255,255,255,.75) !important;
  transition:
    box-shadow .25s ease,
    filter .25s ease !important;
}

.binder-book .card-tile .back {
  display: none !important;
}

.binder-book .card-tile .front {
  display: block !important;
  z-index: 1 !important;
}

.binder-book .face img,
.binder-book .card-tile img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  transform: none !important;
  transition: filter .22s ease !important;
  image-rendering: auto !important;
}

.binder-book .card-tile:hover,
.binder-book .card-tile:focus-visible {
  transform: translateY(-12px) rotate(-.7deg) !important;
  animation: v46CardHoverWobble 1.7s ease-in-out infinite !important;
  filter:
    drop-shadow(0 18px 22px rgba(66, 108, 196, .22))
    drop-shadow(0 0 15px rgba(255, 119, 188, .34)) !important;
}

.binder-book .card-tile:hover .card-inner,
.binder-book .card-tile:focus-visible .card-inner,
.binder-book .card-tile.tilting .card-inner,
.binder-book .card-tile.tap-tilt .card-inner {
  transform: none !important;
  filter: none !important;
}

.binder-book .card-tile:hover .face,
.binder-book .card-tile:focus-visible .face {
  box-shadow:
    0 14px 24px rgba(25, 73, 160, .20),
    0 0 0 2px rgba(255,255,255,.95),
    0 0 22px rgba(255, 136, 203, .42),
    0 0 34px rgba(121, 207, 255, .26) !important;
}

.binder-book .card-tile:hover img,
.binder-book .card-tile:focus-visible img {
  transform: none !important;
  filter: brightness(1.055) saturate(1.035) !important;
}

.binder-book .card-tile:hover img.obscured,
.binder-book .card-tile:focus-visible img.obscured {
  filter: brightness(.83) saturate(.96) blur(.2px) !important;
}

.binder-book .tiny-reveal {
  z-index: 80 !important;
}

.binder-book .slot:hover .tiny-reveal,
.binder-book .slot:focus-within .tiny-reveal {
  z-index: 90 !important;
}

@keyframes v46CardFloat {
  0%, 100% { transform: translateY(0) rotate(-.25deg); }
  50% { transform: translateY(-4px) rotate(.35deg); }
}

@keyframes v46CardHoverWobble {
  0%, 100% { transform: translateY(-12px) rotate(-.7deg); }
  50% { transform: translateY(-15px) rotate(.7deg); }
}

@media (prefers-reduced-motion: reduce) {
  .binder-book .card-tile,
  .binder-book .card-tile:hover,
  .binder-book .card-tile:focus-visible {
    animation: none !important;
  }
}

/* V47: binder slot sizing/layout reset
   The entire sleeve now owns both the card image and the reveal/collected button.
   Cards are no longer rendered as a small image floating above a separate button area. */
body[data-page="binder"] .binder-book,
body[data-page="binder"] .binder-page{
  overflow: visible !important;
}

body[data-page="binder"] .binder-page{
  gap: 12px !important;
  align-content: stretch !important;
}

body[data-page="binder"] .slot{
  aspect-ratio: 2.5 / 3.78 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: stretch !important;
  gap: 7px !important;
  padding: 7px !important;
  overflow: visible !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,226,241,.36)),
    linear-gradient(135deg, rgba(200,221,255,.48), rgba(255,219,237,.42)) !important;
}

body[data-page="binder"] .slot.empty-slot{
  aspect-ratio: 2.5 / 3.78 !important;
  display:block !important;
}

body[data-page="binder"] .card-tile{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  border-radius: 13px !important;
}

body[data-page="binder"] .card-inner{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  transform: none !important;
  animation: none !important;
  filter: none !important;
}

body[data-page="binder"] .face{
  position: absolute !important;
  inset: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

body[data-page="binder"] .face img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
}

body[data-page="binder"] .tiny-reveal{
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(100% - 12px) !important;
  min-height: 36px !important;
  margin: 0 auto 1px !important;
  padding: 8px 10px !important;
  z-index: 8 !important;
}

body[data-page="binder"] .tiny-reveal:hover{
  bottom: auto !important;
  transform: translateY(-1px) !important;
}

body[data-page="binder"] .card-tile:hover .card-inner,
body[data-page="binder"] .card-tile.tap-tilt .card-inner{
  transform: none !important;
  filter: none !important;
}

body[data-page="binder"] .slot:hover{
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.88),
    0 10px 22px rgba(255,120,189,.16),
    0 0 20px rgba(255,174,218,.18) !important;
}

@media (max-width: 1050px){
  body[data-page="binder"] .slot{ aspect-ratio: 2.5 / 3.9 !important; }
}

/* V48 Magical Girl Binder Overhaul
   This replaces the old binder thumbnail interaction stack with a simple, stable structure:
   sleeve slot -> floating wrapper -> card image. No cursor tracking, no ghost layers, no blur. */
body[data-page="binder"] .binder-book {
  overflow: visible !important;
  min-height: clamp(620px, 62vh, 780px) !important;
  padding: 24px 30px 34px !important;
  gap: 34px !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 193, 226, .65), transparent 30%),
    linear-gradient(90deg, #fff6fb 0%, #fffdf8 47%, #fff5fb 100%) !important;
  border: 2px solid rgba(255, 177, 217, .65) !important;
  box-shadow:
    0 28px 70px rgba(255, 120, 189, .20),
    inset 0 0 0 4px rgba(255,255,255,.78),
    inset 0 0 28px rgba(255, 203, 231, .55) !important;
}
body[data-page="binder"] .binder-book::after {
  content: "" !important;
  position: absolute !important;
  inset: -12px !important;
  pointer-events: none !important;
  z-index: 3 !important;
  opacity: .85 !important;
  background:
    radial-gradient(circle at 9% 15%, rgba(255,128,198,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 27% 92%, rgba(255,204,97,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 51% 6%, rgba(120,214,255,.50) 0 2px, transparent 3px),
    radial-gradient(circle at 77% 88%, rgba(255,128,198,.52) 0 2px, transparent 3px),
    radial-gradient(circle at 94% 28%, rgba(255,204,97,.50) 0 2px, transparent 3px);
  animation: v48BinderSparkles 6.5s ease-in-out infinite !important;
}
body[data-page="binder"] .binder-book:before {
  z-index: 4 !important;
  width: 14px !important;
  background: linear-gradient(90deg,#cda7af,#fff7fa 45%,#cda7af) !important;
  box-shadow: 0 0 0 1px rgba(124,82,96,.18), 0 12px 22px rgba(124,82,96,.20) !important;
}
body[data-page="binder"] .ring { z-index: 5 !important; }
body[data-page="binder"] .binder-page {
  overflow: visible !important;
  z-index: 2 !important;
  gap: clamp(12px, 1.25vw, 18px) !important;
  padding: clamp(12px, 1.2vw, 18px) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,244,250,.72)),
    radial-gradient(circle at 20% 20%, rgba(255, 125, 193, .13), transparent 34%) !important;
  border: 1px solid rgba(255, 178, 219, .55) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.82),
    inset 0 0 28px rgba(255, 207, 232, .45),
    0 16px 32px rgba(92, 65, 120, .10) !important;
}
body[data-page="binder"] .starlight-slot {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: stretch !important;
  min-width: 0 !important;
  aspect-ratio: 2.5 / 4.25 !important;
  padding: 8px 8px 10px !important;
  gap: 8px !important;
  border-radius: 20px !important;
  overflow: visible !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,239,248,.82)) !important;
  border: 1px solid rgba(255, 179, 221, .58) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.78),
    0 12px 24px rgba(66, 83, 165, .11),
    0 0 22px rgba(255, 133, 203, .12) !important;
  transform: none !important;
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease !important;
}
body[data-page="binder"] .starlight-slot::before {
  content: "" !important;
  position: absolute !important;
  inset: 6px !important;
  border-radius: 16px !important;
  pointer-events: none !important;
  border: 1px dashed rgba(255, 147, 208, .25) !important;
  opacity: .8 !important;
}
body[data-page="binder"] .starlight-slot.empty-slot {
  aspect-ratio: 2.5 / 4.25 !important;
  opacity: .40 !important;
  background: linear-gradient(145deg, rgba(255,255,255,.55), rgba(255,235,247,.42)) !important;
}
body[data-page="binder"] .starlight-slot:hover,
body[data-page="binder"] .starlight-slot:focus-within {
  z-index: 50 !important;
  border-color: rgba(255, 92, 174, .75) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.92),
    0 22px 40px rgba(255, 87, 171, .22),
    0 0 28px rgba(255, 117, 196, .28),
    0 0 44px rgba(117, 211, 255, .16) !important;
}
body[data-page="binder"] .starlight-card-float {
  position: relative !important;
  z-index: 2 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow: visible !important;
  transform-origin: 50% 85% !important;
  animation: v48CardFloat 5.2s ease-in-out infinite !important;
  animation-delay: var(--float-delay, 0s) !important;
  transition: transform .28s cubic-bezier(.2,.85,.2,1), filter .28s ease !important;
}
body[data-page="binder"] .starlight-slot:hover .starlight-card-float,
body[data-page="binder"] .starlight-slot:focus-within .starlight-card-float {
  animation: v48CardHoverWobble 1.75s ease-in-out infinite !important;
  transform: translateY(-12px) rotate(-1deg) !important;
  filter: drop-shadow(0 18px 22px rgba(255, 91, 174, .26)) !important;
}
body[data-page="binder"] .starlight-card-tile,
body[data-page="binder"] .starlight-card-tile:hover,
body[data-page="binder"] .starlight-card-tile:focus-visible {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  perspective: none !important;
  cursor: pointer !important;
  transform: none !important;
  filter: none !important;
  outline: none !important;
}
body[data-page="binder"] .starlight-card-inner,
body[data-page="binder"] .starlight-card-tile:hover .starlight-card-inner,
body[data-page="binder"] .starlight-card-tile:focus-visible .starlight-card-inner,
body[data-page="binder"] .starlight-card-tile.tilting .starlight-card-inner,
body[data-page="binder"] .starlight-card-tile.tap-tilt .starlight-card-inner {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  transition: none !important;
  filter: none !important;
  transform-style: flat !important;
}
body[data-page="binder"] .starlight-binder-book .card-tile::before,
body[data-page="binder"] .starlight-binder-book .card-tile::after,
body[data-page="binder"] .starlight-card-tile::before,
body[data-page="binder"] .starlight-card-tile::after,
body[data-page="binder"] .starlight-card-inner::before,
body[data-page="binder"] .starlight-card-inner::after,
body[data-page="binder"] .starlight-card-tile .face::before,
body[data-page="binder"] .starlight-card-tile .face::after {
  display: none !important;
  content: none !important;
}
body[data-page="binder"] .starlight-card-tile .face {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 13px !important;
  background: #fff !important;
  transform: none !important;
  backface-visibility: visible !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.78),
    0 9px 20px rgba(32, 73, 160, .18) !important;
}
body[data-page="binder"] .starlight-card-tile .back { display: none !important; }
body[data-page="binder"] .starlight-card-tile .face img,
body[data-page="binder"] .starlight-card-tile img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: inherit !important;
  transform: none !important;
  transition: filter .22s ease, opacity .22s ease !important;
  image-rendering: auto !important;
}
body[data-page="binder"] .starlight-slot:hover .starlight-card-tile .face,
body[data-page="binder"] .starlight-slot:focus-within .starlight-card-tile .face {
  box-shadow:
    0 0 0 3px rgba(255,255,255,.9),
    0 0 0 5px rgba(255, 138, 204, .34),
    0 18px 26px rgba(39, 57, 160, .22),
    0 0 26px rgba(255, 102, 185, .32) !important;
}
body[data-page="binder"] .starlight-slot .badge {
  z-index: 6 !important;
  top: 7px !important;
  left: 7px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #2b73ff, #1454c8) !important;
  box-shadow: 0 4px 10px rgba(21,91,216,.25) !important;
}
body[data-page="binder"] .starlight-slot .fav {
  z-index: 6 !important;
  top: 7px !important;
  right: 7px !important;
  color: #ff62b5 !important;
  filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 0 6px rgba(255, 117, 196, .35)) !important;
}
body[data-page="binder"] .starlight-slot .tiny-reveal {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 20 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.70) !important;
  color: white !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  background: linear-gradient(180deg, #ff91cc, #ea4aa2) !important;
  box-shadow: 0 10px 18px rgba(255, 76, 166, .22), inset 0 1px 0 rgba(255,255,255,.55) !important;
  animation: none !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
body[data-page="binder"] .starlight-slot .tiny-reveal:hover,
body[data-page="binder"] .starlight-slot .tiny-reveal:focus-visible {
  transform: translateY(-2px) !important;
  filter: brightness(1.05) !important;
  box-shadow: 0 13px 22px rgba(255, 76, 166, .28), 0 0 18px rgba(255, 130, 204, .24), inset 0 1px 0 rgba(255,255,255,.65) !important;
}
body[data-page="binder"] .starlight-slot.is-collected .tiny-reveal {
  background: linear-gradient(180deg, #76d7ff, #4b96ef) !important;
  box-shadow: 0 10px 18px rgba(75, 150, 239, .20), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
@keyframes v48CardFloat {
  0%,100% { transform: translateY(0) rotate(-.35deg); }
  50% { transform: translateY(-4px) rotate(.35deg); }
}
@keyframes v48CardHoverWobble {
  0%,100% { transform: translateY(-12px) rotate(-1deg); }
  50% { transform: translateY(-15px) rotate(1deg); }
}
@keyframes v48BinderSparkles {
  0%,100% { opacity: .55; transform: translateY(0); }
  50% { opacity: .95; transform: translateY(-4px); }
}
@media (max-width: 900px) {
  body[data-page="binder"] .starlight-slot { aspect-ratio: 2.5 / 4.12 !important; }
  body[data-page="binder"] .binder-book { min-height: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="binder"] .starlight-card-float,
  body[data-page="binder"] .starlight-slot:hover .starlight-card-float,
  body[data-page="binder"] .binder-book::after { animation: none !important; }
}

/* ======================================================================
   V49 binder thumbnail geometry + hover SFX polish
   - keep the V48 magical binder look
   - stop thumbnail cropping by preserving the card aspect ratio
   - make the image area use the full sleeve above the button
   - keep the hover sound responsive without retriggering inside a card
   ====================================================================== */
body[data-page="binder"] .starlight-slot {
  aspect-ratio: 2.5 / 4.18 !important;
  padding: 7px 7px 9px !important;
  gap: 7px !important;
  overflow: visible !important;
}

body[data-page="binder"] .starlight-card-float {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
}

body[data-page="binder"] .starlight-card-tile,
body[data-page="binder"] .starlight-card-inner {
  height: 100% !important;
  min-height: 0 !important;
}

body[data-page="binder"] .starlight-card-tile .face {
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(180deg, #ffffff, #fff8fc) !important;
  overflow: hidden !important;
}

body[data-page="binder"] .starlight-card-tile .face img,
body[data-page="binder"] .starlight-card-tile img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
}

body[data-page="binder"] .starlight-slot .tiny-reveal {
  flex: 0 0 40px !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
}

body[data-page="binder"] .starlight-slot:hover .starlight-card-float,
body[data-page="binder"] .starlight-slot:focus-within .starlight-card-float {
  transform: translateY(-10px) rotate(-.8deg) !important;
}

@keyframes v48CardHoverWobble {
  0%,100% { transform: translateY(-10px) rotate(-.8deg); }
  50% { transform: translateY(-13px) rotate(.8deg); }
}

/* Keep cards from becoming blurry during the magic float/hover. */
body[data-page="binder"] .starlight-card-float,
body[data-page="binder"] .starlight-card-tile,
body[data-page="binder"] .starlight-card-inner,
body[data-page="binder"] .starlight-card-tile .face,
body[data-page="binder"] .starlight-card-tile img {
  will-change: transform !important;
  transform-style: flat !important;
  backface-visibility: hidden !important;
}

/* ======================================================================
   V50 binder thumbnail uncrop fix
   - make the visible card area use a true 5:7 card ratio
   - keep the reveal/collected button as its own stable tab below the card
   - do not touch the V49 hover sound behavior
   ====================================================================== */
body[data-page="binder"] .starlight-slot {
  aspect-ratio: auto !important;
  display: grid !important;
  grid-template-rows: auto 40px !important;
  align-content: start !important;
  padding: 7px 7px 10px !important;
  gap: 8px !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body[data-page="binder"] .starlight-card-float {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 5 / 7 !important;
  min-height: 0 !important;
  display: block !important;
}

body[data-page="binder"] .starlight-card-tile,
body[data-page="binder"] .starlight-card-inner,
body[data-page="binder"] .starlight-card-tile .face {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

body[data-page="binder"] .starlight-card-tile .face {
  display: block !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

body[data-page="binder"] .starlight-card-tile .face img,
body[data-page="binder"] .starlight-card-tile img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

body[data-page="binder"] .starlight-slot .tiny-reveal {
  grid-row: 2 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  line-height: 1 !important;
}

body[data-page="binder"] .binder-page {
  align-items: start !important;
}

body[data-page="binder"] .empty-slot {
  aspect-ratio: 2.5 / 4.18 !important;
  min-height: 100% !important;
}

/* =========================================================
   V51: Binder/card visual overhaul hard reset
   - Keep existing hover SFX logic intact
   - Force the card image to occupy the full sleeve area above the button
   - Remove old binder tilt/blur/ghost layers from the binder only
   - Add magical-girl pastel binder frame, sleeve glow, idle float, and clean hover lift
   ========================================================= */
body[data-page="binder"] .binder-wrap,
body[data-page="binder"] .binder-book,
body[data-page="binder"] .binder-page,
body[data-page="binder"] .slot {
  overflow: visible !important;
}

body[data-page="binder"] .binder-book.starlight-binder-book,
body[data-page="binder"] .binder-book {
  min-height: 600px !important;
  padding: 28px 34px 30px !important;
  gap: 38px !important;
  border-radius: 34px !important;
  border: 2px solid rgba(255, 211, 232, .95) !important;
  background:
    radial-gradient(circle at 50% -4%, rgba(255, 112, 192, .24), transparent 24%),
    linear-gradient(90deg,
      rgba(255, 203, 226, .80) 0%,
      rgba(255, 248, 252, .98) 5%,
      rgba(255, 255, 255, .96) 46%,
      rgba(255, 181, 217, .34) 50%,
      rgba(255, 255, 255, .96) 54%,
      rgba(255, 248, 252, .98) 95%,
      rgba(255, 203, 226, .80) 100%) !important;
  box-shadow:
    0 26px 64px rgba(255, 106, 184, .18),
    0 18px 46px rgba(21, 91, 216, .16),
    inset 0 0 0 4px rgba(255,255,255,.82),
    inset 0 0 0 9px rgba(255, 188, 221, .24),
    inset 0 20px 34px rgba(255,255,255,.58),
    inset 0 -22px 36px rgba(219, 121, 177, .08) !important;
  transform: none !important;
  isolation: isolate !important;
}

body[data-page="binder"] .binder-book::before {
  width: 20px !important;
  top: 24px !important;
  bottom: 24px !important;
  background:
    linear-gradient(90deg, rgba(178, 119, 143, .26), rgba(255,255,255,.96) 34%, rgba(255, 148, 196, .44) 50%, rgba(255,255,255,.96) 66%, rgba(178, 119, 143, .26)) !important;
  border-radius: 999px !important;
  box-shadow:
    0 0 0 1px rgba(176, 93, 129, .20),
    0 12px 24px rgba(128, 73, 99, .18),
    inset 0 0 13px rgba(255,255,255,.95) !important;
}

body[data-page="binder"] .binder-book::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .95 !important;
  background:
    radial-gradient(circle, rgba(255, 207, 75, .60) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255, 112, 192, .45) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(114, 207, 255, .38) 0 2px, transparent 3px),
    linear-gradient(90deg, transparent 48%, rgba(152, 94, 120, .10) 50%, transparent 52%) !important;
  background-size: 128px 118px, 92px 86px, 156px 138px, auto !important;
  background-position: 18px 20px, 54px 64px, 12px 34px, center !important;
  animation: v51BinderSparkleDrift 9s linear infinite !important;
}

@keyframes v51BinderSparkleDrift {
  0% { background-position: 18px 20px, 54px 64px, 12px 34px, center; }
  100% { background-position: 18px -98px, 54px -22px, 12px -104px, center; }
}

body[data-page="binder"] .binder-page {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  padding: 18px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255, 189, 220, .58) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,239,247,.78) 58%, rgba(245,249,255,.76)),
    repeating-linear-gradient(90deg, rgba(255, 151, 203, .035) 0 2px, transparent 2px 30px) !important;
  box-shadow:
    0 16px 30px rgba(238, 104, 174, .10),
    inset 0 0 0 2px rgba(255,255,255,.78),
    inset 0 12px 26px rgba(255,255,255,.70),
    inset 0 -14px 26px rgba(255, 138, 200, .07) !important;
}

body[data-page="binder"] .binder-page::before {
  content: "" !important;
  position: absolute !important;
  inset: 11px !important;
  pointer-events: none !important;
  border-radius: 22px !important;
  border: 1px dashed rgba(255, 118, 190, .24) !important;
  box-shadow: inset 0 0 26px rgba(114, 207, 255, .10) !important;
}

body[data-page="binder"] .ring {
  z-index: 5 !important;
  border-color: #bd8b98 !important;
  background: linear-gradient(180deg, #fff8fb, #ffc9dc 58%, #e7a2ba) !important;
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.88),
    inset 0 -3px 6px rgba(135, 72, 93, .30),
    0 5px 12px rgba(111, 58, 80, .22) !important;
}

body[data-page="binder"] .slot {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  /* This is the full physical sleeve: card area + reveal button area. */
  aspect-ratio: 2.5 / 3.72 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 50% 6%, rgba(255,255,255,.90), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255, 238, 247, .80)) !important;
  border: 1px solid rgba(255,255,255,.96) !important;
  box-shadow:
    0 9px 20px rgba(236, 107, 179, .10),
    inset 0 0 0 2px rgba(255,255,255,.86),
    inset 0 0 0 8px rgba(255, 239, 247, .55),
    inset 0 -18px 30px rgba(255, 119, 189, .08) !important;
  isolation: isolate !important;
  transform: none !important;
  animation: none !important;
}

body[data-page="binder"] .slot::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px 8px 46px 8px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: 15px !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.40), rgba(255,222,240,.18)),
    radial-gradient(circle at center, rgba(255,120,189,.08), transparent 66%) !important;
  box-shadow:
    inset 0 0 20px rgba(255,255,255,.62),
    0 0 0 1px rgba(255, 177, 216, .16) !important;
}

body[data-page="binder"] .slot::after {
  content: "✧" !important;
  position: absolute !important;
  right: 9px !important;
  top: 10px !important;
  z-index: 6 !important;
  pointer-events: none !important;
  color: rgba(255, 96, 178, .78) !important;
  font-size: 1rem !important;
  text-shadow: 0 0 7px rgba(255,255,255,.95), 0 0 11px rgba(255, 120, 189, .38) !important;
}

body[data-page="binder"] .slot:hover,
body[data-page="binder"] .slot:focus-within {
  z-index: 80 !important;
  box-shadow:
    0 14px 30px rgba(236, 107, 179, .17),
    0 0 24px rgba(255, 120, 189, .24),
    inset 0 0 0 2px rgba(255,255,255,.92),
    inset 0 0 0 8px rgba(255, 239, 247, .55) !important;
}

body[data-page="binder"] .starlight-card-float {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  top: 10px !important;
  bottom: 54px !important;
  z-index: 3 !important;
  transform-origin: center bottom !important;
  animation: v51CardIdleMagic 5.8s ease-in-out infinite !important;
  animation-delay: var(--float-delay, 0s) !important;
  will-change: transform, filter !important;
}

@keyframes v51CardIdleMagic {
  0%, 100% { transform: translate3d(0, 0, 0) rotateZ(-.18deg); }
  42% { transform: translate3d(0, -3px, 0) rotateZ(.22deg); }
  72% { transform: translate3d(0, 1px, 0) rotateZ(-.10deg); }
}

body[data-page="binder"] .slot:hover .starlight-card-float,
body[data-page="binder"] .slot:focus-within .starlight-card-float {
  animation: v51CardLiftMagic 1.9s ease-in-out infinite !important;
  filter:
    drop-shadow(0 18px 22px rgba(21, 91, 216, .18))
    drop-shadow(0 0 18px rgba(255, 120, 189, .30))
    brightness(1.045) saturate(1.045) !important;
}

@keyframes v51CardLiftMagic {
  0%, 100% { transform: translate3d(0, -15px, 0) rotateZ(-.65deg); }
  35% { transform: translate3d(0, -18px, 0) rotateZ(.75deg); }
  68% { transform: translate3d(0, -13px, 0) rotateZ(-.35deg); }
}

body[data-page="binder"] .card-tile,
body[data-page="binder"] .card-tile:hover,
body[data-page="binder"] .card-tile:focus-visible,
body[data-page="binder"] .card-tile.tilting {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  transform: none !important;
  animation: none !important;
  filter: none !important;
  perspective: none !important;
  cursor: pointer !important;
}

body[data-page="binder"] .card-inner,
body[data-page="binder"] .card-tile:hover .card-inner,
body[data-page="binder"] .card-tile:focus-visible .card-inner,
body[data-page="binder"] .card-tile.tilting .card-inner {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  animation: none !important;
  filter: none !important;
  transition: none !important;
  overflow: visible !important;
}

body[data-page="binder"] .face,
body[data-page="binder"] .card-tile:hover .face,
body[data-page="binder"] .card-tile.tilting .face,
body[data-page="binder"] .card-tile:focus-visible .face {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  border-radius: 13px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.94) !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
  box-shadow:
    0 10px 18px rgba(27, 76, 168, .16),
    0 0 0 2px rgba(255,255,255,.92),
    0 0 16px rgba(255, 155, 207, .15) !important;
}

body[data-page="binder"] .face img,
body[data-page="binder"] .card-tile img,
body[data-page="binder"] .binder-book .face img,
body[data-page="binder"] .card-tile:hover img,
body[data-page="binder"] .card-tile.tilting img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  scale: 1 !important;
  image-rendering: auto !important;
}

body[data-page="binder"] .back { transform: rotateY(180deg) !important; }
body[data-page="binder"] .card-tile:hover::before,
body[data-page="binder"] .card-tile:hover::after,
body[data-page="binder"] .card-tile:hover .card-inner::before,
body[data-page="binder"] .card-tile:hover .card-inner::after,
body[data-page="binder"] .card-tile:hover .face::before,
body[data-page="binder"] .card-tile:hover .face::after {
  content: none !important;
  display: none !important;
}

body[data-page="binder"] .badge {
  top: 7px !important;
  left: 7px !important;
  z-index: 8 !important;
  border-radius: 999px !important;
  padding: 4px 8px !important;
  background: linear-gradient(180deg, #337aff, #0d4abe) !important;
  box-shadow: 0 4px 10px rgba(13, 74, 190, .22), inset 0 1px 0 rgba(255,255,255,.35) !important;
}

body[data-page="binder"] .fav {
  top: 8px !important;
  right: 8px !important;
  z-index: 8 !important;
  color: #ff66b6 !important;
}

body[data-page="binder"] .tiny-reveal,
body[data-page="binder"] .slot .tiny-reveal {
  position: absolute !important;
  left: 13px !important;
  right: 13px !important;
  bottom: 10px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  transform: none !important;
  z-index: 12 !important;
  border-radius: 999px !important;
  padding: 10px 12px !important;
  line-height: 1 !important;
  text-align: center !important;
  color: #fff !important;
  background: linear-gradient(180deg, #ff9bd2, #e64c9e 70%, #d93b91) !important;
  box-shadow:
    0 10px 18px rgba(255, 79, 167, .25),
    inset 0 1px 0 rgba(255,255,255,.45) !important;
  pointer-events: auto !important;
}

body[data-page="binder"] .tiny-reveal:hover,
body[data-page="binder"] .tiny-reveal:focus-visible {
  bottom: 10px !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 12px 22px rgba(255, 79, 167, .32),
    0 0 0 5px rgba(255, 120, 189, .16),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
}

body[data-page="binder"] .is-collected .tiny-reveal {
  background: linear-gradient(180deg, #7ed9ff, #4c9cf1 70%, #367dd9) !important;
}

body[data-page="binder"] .obscured {
  filter: brightness(.82) saturate(.92) blur(.25px) !important;
}

@media (max-width: 1260px) {
  body[data-page="binder"] .binder-book { padding: 22px 24px 26px !important; gap: 28px !important; }
  body[data-page="binder"] .binder-page { gap: 14px !important; padding: 14px !important; }
  body[data-page="binder"] .starlight-card-float { left: 10px !important; right: 10px !important; top: 9px !important; bottom: 52px !important; }
}

/* V52 binder geometry reset: card artwork fills the actual card area, not a stretched sleeve. */
body[data-page="binder"] .binder-book,
body[data-page="binder"] .binder-page,
body[data-page="binder"] .slot {
  overflow: visible !important;
}

body[data-page="binder"] .binder-page {
  align-content: start !important;
  align-items: start !important;
  grid-auto-rows: auto !important;
  gap: 18px !important;
}

body[data-page="binder"] .slot {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  aspect-ratio: 2.5 / 4.12 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 10px 12px !important;
}

body[data-page="binder"] .slot::before {
  inset: 7px 7px 7px 7px !important;
}

body[data-page="binder"] .starlight-card-float {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2.5 / 3.5 !important;
  flex: 0 0 auto !important;
  z-index: 3 !important;
}

body[data-page="binder"] .card-tile,
body[data-page="binder"] .card-inner,
body[data-page="binder"] .face {
  width: 100% !important;
  height: 100% !important;
}

body[data-page="binder"] .face img,
body[data-page="binder"] .card-tile img,
body[data-page="binder"] .binder-book .face img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

body[data-page="binder"] .tiny-reveal,
body[data-page="binder"] .slot .tiny-reveal {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
  margin: 10px auto 0 !important;
  padding: 10px 10px !important;
  flex: 0 0 auto !important;
}

body[data-page="binder"] .tiny-reveal:hover,
body[data-page="binder"] .tiny-reveal:focus-visible {
  bottom: auto !important;
  transform: translateY(-1px) !important;
}

body[data-page="binder"] .slot:hover .starlight-card-float,
body[data-page="binder"] .slot:focus-within .starlight-card-float {
  animation: v52CardLiftMagic 1.9s ease-in-out infinite !important;
}

@keyframes v52CardLiftMagic {
  0%, 100% { transform: translate3d(0, -10px, 0) rotateZ(-.55deg); }
  35% { transform: translate3d(0, -13px, 0) rotateZ(.65deg); }
  68% { transform: translate3d(0, -8px, 0) rotateZ(-.25deg); }
}

@media (max-width: 1260px) {
  body[data-page="binder"] .slot { padding: 9px 9px 11px !important; }
  body[data-page="binder"] .binder-page { gap: 15px !important; }
}

/* =========================================================
   V53: Binder sleeve geometry real fix
   The slot is now split into an expanding card stage + fixed button tray.
   This removes the dead vertical space and lets hidden/revealed cards fill
   the sleeve properly while preserving the working hover SFX behavior.
   ========================================================= */
body[data-page="binder"] .binder-book,
body[data-page="binder"] .binder-page,
body[data-page="binder"] .slot,
body[data-page="binder"] .binder-card-stage {
  overflow: visible !important;
}

body[data-page="binder"] .binder-page {
  align-items: stretch !important;
  align-content: start !important;
  grid-auto-rows: auto !important;
}

body[data-page="binder"] .slot.starlight-slot {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 44px !important;
  gap: 8px !important;
  aspect-ratio: 2.5 / 4.05 !important;
  padding: 8px !important;
  min-height: 0 !important;
  height: auto !important;
}

body[data-page="binder"] .slot.starlight-slot::before {
  inset: 6px !important;
}

body[data-page="binder"] .binder-card-stage {
  position: relative !important;
  z-index: 3 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

body[data-page="binder"] .starlight-card-float {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  height: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  aspect-ratio: 2.5 / 3.5 !important;
  flex: 0 0 auto !important;
  margin: 0 auto !important;
  transform-origin: center bottom !important;
}

body[data-page="binder"] .card-tile,
body[data-page="binder"] .card-inner,
body[data-page="binder"] .face {
  width: 100% !important;
  height: 100% !important;
}

body[data-page="binder"] .face img,
body[data-page="binder"] .card-tile img,
body[data-page="binder"] .binder-book .face img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

body[data-page="binder"] .tiny-reveal,
body[data-page="binder"] .slot .tiny-reveal {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  align-self: stretch !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  transform: none !important;
  z-index: 12 !important;
}

body[data-page="binder"] .tiny-reveal:hover,
body[data-page="binder"] .tiny-reveal:focus-visible {
  transform: translateY(-1px) !important;
}

body[data-page="binder"] .slot:hover .starlight-card-float,
body[data-page="binder"] .slot:focus-within .starlight-card-float {
  animation: v53CardLiftMagic 1.85s ease-in-out infinite !important;
}

@keyframes v53CardLiftMagic {
  0%, 100% { transform: translate3d(0, -10px, 0) rotateZ(-.45deg); }
  35% { transform: translate3d(0, -13px, 0) rotateZ(.55deg); }
  68% { transform: translate3d(0, -8px, 0) rotateZ(-.20deg); }
}

@media (max-width: 1260px) {
  body[data-page="binder"] .slot.starlight-slot {
    padding: 7px !important;
    gap: 7px !important;
    grid-template-rows: minmax(0, 1fr) 42px !important;
  }
  body[data-page="binder"] .tiny-reveal,
  body[data-page="binder"] .slot .tiny-reveal {
    height: 42px !important;
    min-height: 42px !important;
  }
}

/* =========================================================
   V54 TRUE BINDER REBUILD: slot geometry fix
   The old binder reserved a permanent bottom button row even when
   Starlight Mode hid the button, causing every thumbnail to look tiny.
   This override makes the card fill the whole slot unless a reveal/
   collected button is actually present.
   ========================================================= */
body[data-page="binder"] .binder-book {
  overflow: visible !important;
}

body[data-page="binder"] .binder-page {
  overflow: visible !important;
  align-items: stretch !important;
  grid-auto-rows: 1fr !important;
}

body[data-page="binder"] .slot.starlight-slot {
  position: relative !important;
  display: grid !important;
  aspect-ratio: 2.5 / 3.85 !important;
  padding: 9px !important;
  border-radius: 22px !important;
  overflow: visible !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,239,249,.86)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.9),
    inset 0 0 28px rgba(255,192,224,.22),
    0 14px 28px rgba(64,86,166,.11),
    0 0 18px rgba(255,133,203,.12) !important;
  transform: none !important;
}

body[data-page="binder"] .slot.starlight-slot.has-binder-control {
  grid-template-rows: minmax(0, 1fr) 42px !important;
  gap: 7px !important;
}

body[data-page="binder"] .slot.starlight-slot.no-binder-control {
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
}

body[data-page="binder"] .binder-card-stage {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
}

body[data-page="binder"] .starlight-card-float {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  display: block !important;
  transform-origin: 50% 82% !important;
  animation: v54BinderIdleFloat 5.2s ease-in-out infinite !important;
  animation-delay: var(--float-delay, 0s) !important;
  transition: filter .2s ease !important;
  will-change: transform !important;
}

body[data-page="binder"] .starlight-card-tile,
body[data-page="binder"] .starlight-card-inner,
body[data-page="binder"] .starlight-card-tile .face {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  transition: none !important;
  background: transparent !important;
}

body[data-page="binder"] .starlight-card-tile .face {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.86),
    0 10px 22px rgba(23,68,156,.18) !important;
}

body[data-page="binder"] .starlight-card-tile .back {
  display: none !important;
}

body[data-page="binder"] .starlight-card-tile .face img,
body[data-page="binder"] .starlight-card-tile img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: inherit !important;
  filter: none;
}

body[data-page="binder"] .slot.starlight-slot:hover,
body[data-page="binder"] .slot.starlight-slot:focus-within {
  z-index: 90 !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.96),
    0 22px 46px rgba(255,86,174,.25),
    0 0 28px rgba(255,127,203,.32),
    0 0 55px rgba(114,207,255,.16) !important;
}

body[data-page="binder"] .slot.starlight-slot:hover .starlight-card-float,
body[data-page="binder"] .slot.starlight-slot:focus-within .starlight-card-float {
  animation: v54BinderHoverFloat 1.55s ease-in-out infinite !important;
  filter: drop-shadow(0 18px 24px rgba(255,86,174,.28)) !important;
}

body[data-page="binder"] .slot.starlight-slot .tiny-reveal {
  position: relative !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 20 !important;
}

body[data-page="binder"] .slot.starlight-slot.no-binder-control .tiny-reveal {
  display: none !important;
}

body[data-page="binder"] .slot.starlight-slot .badge {
  z-index: 10 !important;
}
body[data-page="binder"] .slot.starlight-slot .fav {
  z-index: 10 !important;
}

@keyframes v54BinderIdleFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotateZ(-.22deg); }
  50% { transform: translate3d(0, -3px, 0) rotateZ(.22deg); }
}

@keyframes v54BinderHoverFloat {
  0%, 100% { transform: translate3d(0, -12px, 0) rotateZ(-.7deg); }
  45% { transform: translate3d(0, -16px, 0) rotateZ(.65deg); }
  75% { transform: translate3d(0, -10px, 0) rotateZ(-.25deg); }
}

@media (max-width: 1260px) {
  body[data-page="binder"] .slot.starlight-slot {
    padding: 8px !important;
  }
  body[data-page="binder"] .slot.starlight-slot.has-binder-control {
    grid-template-rows: minmax(0, 1fr) 40px !important;
  }
  body[data-page="binder"] .slot.starlight-slot .tiny-reveal {
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* =========================================================
   V55 COMPLETE BINDER CARD REWRITE
   Replaces the nested wrapper/face/thumb system in the binder only.
   The slot is now simple: slot -> card image button -> reveal button.
   ========================================================= */
body[data-page="binder"] .binder-book,
body[data-page="binder"] .binder-page {
  overflow: visible !important;
}

body[data-page="binder"] .binder-book {
  background:
    linear-gradient(90deg, rgba(255,228,244,.92), rgba(255,255,255,.96) 17%, rgba(255,255,255,.98) 48%, rgba(255,255,255,.96) 83%, rgba(255,228,244,.92)),
    radial-gradient(circle at 18% 20%, rgba(255,112,188,.16), transparent 34%),
    radial-gradient(circle at 78% 12%, rgba(255,203,80,.14), transparent 26%) !important;
  border: 2px solid rgba(255,181,220,.55) !important;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.8),
    inset 0 0 44px rgba(255,130,200,.18),
    0 20px 52px rgba(83,78,165,.18) !important;
}

body[data-page="binder"] .binder-page {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 16px !important;
  padding: 14px !important;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,246,252,.54)),
    repeating-linear-gradient(90deg, rgba(255,143,204,.08) 0 1px, transparent 1px 33.333%) !important;
  border: 1px solid rgba(255,168,216,.34) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.64),
    inset 0 0 24px rgba(255,189,224,.18) !important;
}

body[data-page="binder"] .slot.v55-slot {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
  aspect-ratio: 2.5 / 4.35 !important;
  padding: 0 !important;
  border-radius: 24px !important;
  overflow: visible !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,238,248,.83)) !important;
  border: 1px solid rgba(255,181,220,.58) !important;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.84),
    inset 0 -22px 38px rgba(255,162,211,.16),
    0 10px 20px rgba(67,90,170,.10) !important;
  transform: none !important;
  animation: none !important;
}

body[data-page="binder"] .slot.v55-slot.empty-slot {
  opacity: .42 !important;
  aspect-ratio: 2.5 / 4.35 !important;
  border: 1px dashed rgba(255,178,218,.38) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,239,248,.28)) !important;
}

body[data-page="binder"] .slot.v55-slot::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border-radius: 20px !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.75) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 72%, rgba(255,211,83,.28) 0 2px, transparent 3px) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.56) !important;
  opacity: .9 !important;
}

body[data-page="binder"] .slot.v55-slot::after {
  content: "" !important;
  position: absolute !important;
  inset: 10px !important;
  border-radius: 20px !important;
  pointer-events: none !important;
  background: linear-gradient(135deg, rgba(255,255,255,.26), transparent 34%, rgba(255,120,189,.08)) !important;
  z-index: 2 !important;
}

body[data-page="binder"] .slot.v55-slot .v55-card {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  top: 10px !important;
  bottom: 58px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  cursor: pointer !important;
  overflow: visible !important;
  z-index: 10 !important;
  transform-origin: center bottom !important;
  animation: v55CardFloat 5.6s ease-in-out infinite !important;
  animation-delay: var(--float-delay, 0s) !important;
  transition: filter .18s ease !important;
  will-change: transform, filter !important;
  transform: translate3d(0,0,0) !important;
}

body[data-page="binder"] .slot.v55-slot.no-binder-control .v55-card {
  bottom: 10px !important;
}

body[data-page="binder"] .slot.v55-slot .v55-card-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 15px !important;
  display: block !important;
  background: transparent !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.86),
    0 12px 18px rgba(27,65,151,.20),
    0 0 18px rgba(255,117,194,.18) !important;
  filter: none !important;
  transform: none !important;
}

body[data-page="binder"] .slot.v55-slot .v55-card-img.obscured {
  filter: brightness(.76) saturate(.92) blur(.2px) !important;
}

body[data-page="binder"] .slot.v55-slot .v55-badge,
body[data-page="binder"] .slot.v55-slot .v55-fav {
  position: absolute !important;
  z-index: 18 !important;
  pointer-events: none !important;
}
body[data-page="binder"] .slot.v55-slot .v55-badge {
  left: 7px !important;
  top: 7px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(180deg, #2d7cff, #1455ca) !important;
  font-weight: 900 !important;
  font-size: .82rem !important;
  box-shadow: 0 4px 10px rgba(26,86,201,.26) !important;
}
body[data-page="binder"] .slot.v55-slot .v55-fav {
  right: 7px !important;
  top: 7px !important;
  color: #ff64b5 !important;
  font-size: 1.05rem !important;
  text-shadow: 0 2px 0 #fff, 0 0 8px rgba(255,95,181,.45) !important;
}

body[data-page="binder"] .slot.v55-slot .tiny-reveal {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  width: auto !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  z-index: 30 !important;
  color: #fff !important;
  font-weight: 900 !important;
  background: linear-gradient(180deg, #ff91cf, #dc4b9b) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.64),
    0 8px 16px rgba(205,57,144,.22),
    0 0 14px rgba(255,125,199,.18) !important;
  transform: none !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

body[data-page="binder"] .slot.v55-slot .tiny-reveal:hover,
body[data-page="binder"] .slot.v55-slot .tiny-reveal:focus-visible {
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 12px 20px rgba(205,57,144,.28),
    0 0 22px rgba(255,125,199,.28) !important;
}

body[data-page="binder"] .slot.v55-slot.is-collected .tiny-reveal {
  background: linear-gradient(180deg, #83cdff, #4b97ed) !important;
}

body[data-page="binder"] .slot.v55-slot:hover,
body[data-page="binder"] .slot.v55-slot:focus-within {
  z-index: 120 !important;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.94),
    0 18px 38px rgba(255,86,174,.20),
    0 0 28px rgba(255,121,200,.32),
    0 0 58px rgba(255,218,92,.18) !important;
}

body[data-page="binder"] .slot.v55-slot:hover .v55-card,
body[data-page="binder"] .slot.v55-slot:focus-within .v55-card {
  animation: v55CardHoverMagic 1.35s ease-in-out infinite !important;
  filter: drop-shadow(0 18px 22px rgba(255,75,167,.30)) !important;
}

body[data-page="binder"] .slot.v55-slot:hover .v55-card-img,
body[data-page="binder"] .slot.v55-slot:focus-within .v55-card-img {
  box-shadow:
    0 0 0 2px rgba(255,255,255,.92),
    0 14px 28px rgba(27,65,151,.22),
    0 0 18px rgba(255,255,255,.82),
    0 0 32px rgba(255,105,190,.42),
    0 0 52px rgba(255,216,92,.18) !important;
}

/* Kill every old nested card layer in the binder if any stale markup remains. */
body[data-page="binder"] .slot.v55-slot .binder-card-stage,
body[data-page="binder"] .slot.v55-slot .starlight-card-float,
body[data-page="binder"] .slot.v55-slot .card-inner,
body[data-page="binder"] .slot.v55-slot .face,
body[data-page="binder"] .slot.v55-slot .front,
body[data-page="binder"] .slot.v55-slot .back {
  all: unset;
}

@keyframes v55CardFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotateZ(-.15deg); }
  50% { transform: translate3d(0, -3px, 0) rotateZ(.18deg); }
}

@keyframes v55CardHoverMagic {
  0%, 100% { transform: translate3d(0, -12px, 0) rotateZ(-.75deg); }
  45% { transform: translate3d(0, -16px, 0) rotateZ(.75deg); }
  75% { transform: translate3d(0, -10px, 0) rotateZ(-.25deg); }
}

@media (max-width: 1260px) {
  body[data-page="binder"] .binder-page { gap: 12px !important; padding: 10px !important; }
  body[data-page="binder"] .slot.v55-slot { aspect-ratio: 2.5 / 4.45 !important; }
  body[data-page="binder"] .slot.v55-slot .v55-card { left: 8px !important; right: 8px !important; top: 8px !important; bottom: 54px !important; }
  body[data-page="binder"] .slot.v55-slot .tiny-reveal { left: 8px !important; right: 8px !important; bottom: 8px !important; height: 38px !important; min-height: 38px !important; }
  body[data-page="binder"] .slot.v55-slot.no-binder-control .v55-card { bottom: 8px !important; }
}


/* ===============================
   V56 BINDER OVERHAUL
   Clean card slots + magical-girl hover without breaking hover SFX.
   This intentionally overrides older binder thumbnail effects only.
   =============================== */
.binder-book.starlight-binder-book,
.binder-book {
  --slot-gap: clamp(12px, 1.15vw, 18px);
  --slot-pad: clamp(8px, .7vw, 12px);
  --button-h: 46px;
  --card-radius: 15px;
  overflow: visible !important;
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(16px, 1.4vw, 24px) clamp(20px, 1.8vw, 30px) !important;
  gap: clamp(26px, 2.8vw, 38px) !important;
  background:
    radial-gradient(circle at 10% 12%, rgba(255, 154, 211, .22), transparent 18%),
    radial-gradient(circle at 92% 16%, rgba(255, 210, 87, .16), transparent 18%),
    linear-gradient(90deg, #fff6fb 0%, #fff 48%, #fff 52%, #fff6fb 100%) !important;
  border: 2px solid rgba(255, 190, 224, .75) !important;
  box-shadow:
    0 22px 50px rgba(255, 119, 189, .16),
    0 10px 25px rgba(26, 82, 177, .10),
    inset 0 0 0 3px rgba(255,255,255,.82),
    inset 0 0 55px rgba(255, 211, 237, .48) !important;
}

.binder-book.starlight-binder-book::after,
.binder-book::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(circle, rgba(255,120,189,.42) 0 2px, transparent 2.6px) 2% 7% / 92px 92px,
    radial-gradient(circle, rgba(114,207,255,.34) 0 1.6px, transparent 2.2px) 46% 32% / 110px 110px,
    radial-gradient(circle, rgba(255,200,74,.42) 0 1.8px, transparent 2.4px) 82% 22% / 86px 86px,
    linear-gradient(90deg, rgba(255,120,189,.09), transparent 22%, transparent 78%, rgba(255,120,189,.09));
  opacity: .70 !important;
  animation: v56BinderSparkles 10s linear infinite !important;
}
@keyframes v56BinderSparkles {
  0% { background-position: 2% 7%, 46% 32%, 82% 22%, 0 0; opacity: .50; }
  50% { opacity: .85; }
  100% { background-position: 2% -85%, 46% -78%, 82% -64%, 0 0; opacity: .50; }
}

.binder-book.starlight-binder-book::before,
.binder-book::before {
  z-index: 3 !important;
  width: 14px !important;
  background: linear-gradient(90deg,#e8c5d0 0%,#fff 42%,#bd8f9e 100%) !important;
  box-shadow:
    0 0 0 1px rgba(133,78,94,.16),
    0 0 22px rgba(255,120,189,.28),
    inset 0 0 8px rgba(137,78,94,.20) !important;
}
.binder-book .ring { z-index: 5 !important; }

.binder-book .binder-page {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  gap: var(--slot-gap) !important;
  padding: clamp(10px, 1vw, 16px) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.92), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,232,243,.54)) !important;
  border: 1px solid rgba(255, 177, 219, .58) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.72),
    inset 0 0 32px rgba(255, 194, 229, .24) !important;
  overflow: visible !important;
}

/* The slot is the sleeve. It never moves. */
.binder-book .slot,
.binder-book .v55-slot {
  position: relative !important;
  min-width: 0 !important;
  aspect-ratio: 2.5 / 3.5 !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 22px !important;
  overflow: visible !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,236,247,.80)) !important;
  border: 1px solid rgba(255, 195, 229, .72) !important;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.72),
    inset 0 -34px 44px rgba(255,180,218,.14),
    0 9px 18px rgba(38, 77, 156, .08) !important;
  transform: none !important;
  isolation: isolate !important;
}
.binder-book .slot::before,
.binder-book .v55-slot::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  z-index: 0 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.03)),
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.72), transparent 35%) !important;
  box-shadow: inset 0 0 20px rgba(255, 218, 240, .36) !important;
  pointer-events: none !important;
}
.binder-book .empty-slot {
  opacity: .62 !important;
  background:
    radial-gradient(circle at 50% 46%, rgba(255,120,189,.12), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.58), rgba(255,237,247,.36)) !important;
}
.binder-book .empty-slot::after {
  content: "✧" !important;
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(255,120,189,.24) !important;
  font-size: clamp(2rem, 4vw, 4rem) !important;
  pointer-events: none !important;
}

/* The actual card is a single absolute element that fills the sleeve card area. */
.binder-book .card-tile,
.binder-book .v55-card {
  position: absolute !important;
  left: var(--slot-pad) !important;
  right: var(--slot-pad) !important;
  top: var(--slot-pad) !important;
  bottom: calc(var(--button-h) + var(--slot-pad) + 4px) !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: var(--card-radius) !important;
  background: transparent !important;
  box-shadow:
    0 9px 16px rgba(20, 61, 151, .16),
    0 0 0 2px rgba(255,255,255,.86) !important;
  cursor: pointer !important;
  overflow: visible !important;
  z-index: 2 !important;
  transform-origin: 50% 70% !important;
  animation: v56CardIdleFloat 4.8s ease-in-out infinite !important;
  animation-delay: var(--float-delay, 0s) !important;
  transition: transform .34s cubic-bezier(.18,.82,.24,1), filter .24s ease, box-shadow .24s ease !important;
  will-change: transform, filter !important;
}

.binder-book .card-tile::before,
.binder-book .v55-card::before {
  content: "" !important;
  position: absolute !important;
  inset: -10px !important;
  border-radius: 22px !important;
  z-index: -1 !important;
  opacity: .24 !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.9), transparent 11%),
    radial-gradient(circle at 82% 20%, rgba(255,120,189,.55), transparent 13%),
    radial-gradient(circle at 50% 105%, rgba(255,200,74,.42), transparent 20%) !important;
  filter: blur(10px) !important;
  transition: opacity .25s ease, filter .25s ease, transform .25s ease !important;
  pointer-events: none !important;
}

.binder-book .card-tile::after,
.binder-book .v55-card::after {
  content: "" !important;
  position: absolute !important;
  inset: -12px !important;
  z-index: 4 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 8% 18%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 96% 28%, #fff6a8 0 1.6px, transparent 3px),
    radial-gradient(circle at 70% 92%, #ffd0ec 0 2px, transparent 3.4px),
    linear-gradient(115deg, transparent 0 35%, rgba(255,255,255,.44), transparent 58%) !important;
  transition: opacity .25s ease !important;
}

@keyframes v56CardIdleFloat {
  0%, 100% { transform: translateY(0) rotate(-.28deg); }
  50% { transform: translateY(-3px) rotate(.28deg); }
}
@keyframes v56CardHoverWiggle {
  0%, 100% { transform: translateY(-16px) rotate(-1.4deg); }
  50% { transform: translateY(-21px) rotate(1.4deg); }
}
@keyframes v56HoverTwinkle {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50% { opacity: .9; transform: translateY(-3px); }
}

/* Hover: pop out of sleeve, wobble gently, glow. No cursor tracking. */
.binder-book .slot:not(.empty-slot):hover .card-tile,
.binder-book .v55-slot:not(.empty-slot):hover .v55-card {
  z-index: 20 !important;
  animation: v56CardHoverWiggle 1.45s ease-in-out infinite !important;
  filter: brightness(1.06) saturate(1.08) drop-shadow(0 20px 24px rgba(255, 109, 192, .25)) !important;
  box-shadow:
    0 18px 28px rgba(42, 80, 170, .18),
    0 0 0 2px rgba(255,255,255,.96),
    0 0 16px rgba(255,120,189,.55),
    0 0 36px rgba(255,199,232,.42) !important;
}
.binder-book .slot:not(.empty-slot):hover .card-tile::before,
.binder-book .v55-slot:not(.empty-slot):hover .v55-card::before {
  opacity: .78 !important;
  filter: blur(13px) !important;
  transform: scale(1.03) !important;
}
.binder-book .slot:not(.empty-slot):hover .card-tile::after,
.binder-book .v55-slot:not(.empty-slot):hover .v55-card::after {
  opacity: 1 !important;
  animation: v56HoverTwinkle 1.25s ease-in-out infinite !important;
}

/* Full card image visibility: no crop, no inherited blur or tiny-card wrappers. */
.binder-book .card-tile img,
.binder-book .v55-card-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: var(--card-radius) !important;
  background: rgba(255,255,255,.82) !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}
.binder-book .card-tile img.obscured,
.binder-book .v55-card-img.obscured {
  filter: brightness(.86) saturate(.95) blur(.2px) !important;
}

/* Badge/favorite pinned to the visual card, not the sleeve. */
.binder-book .badge,
.binder-book .v55-badge {
  top: -4px !important;
  left: -4px !important;
  z-index: 8 !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  font-size: clamp(.72rem, .85vw, .9rem) !important;
  background: linear-gradient(180deg, #438bff, #155bd8) !important;
  box-shadow: 0 5px 10px rgba(21,91,216,.24), inset 0 1px 0 rgba(255,255,255,.48) !important;
}
.binder-book .fav,
.binder-book .v55-fav {
  top: -4px !important;
  right: -4px !important;
  z-index: 8 !important;
  color: #ff72bd !important;
  text-shadow: 0 1px 0 #fff, 0 0 8px rgba(255,120,189,.46) !important;
}

/* Button is a slot control anchored at the bottom. It does not affect card sizing. */
.binder-book .tiny-reveal,
.binder-book .tiny-reveal:hover,
.binder-book .tiny-reveal:focus-visible {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 8px !important;
  transform: translateX(-50%) !important;
  z-index: 30 !important;
  width: calc(100% - 22px) !important;
  min-width: 0 !important;
  height: 38px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: clamp(.74rem, .9vw, .9rem) !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  color: #fff !important;
  background: linear-gradient(180deg,#ff9bd1 0%, #ff55ad 48%, #c74993 100%) !important;
  border: 2px solid rgba(255,255,255,.75) !important;
  box-shadow:
    0 9px 18px rgba(207, 62, 145, .24),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
}
.binder-book .is-collected .tiny-reveal {
  background: linear-gradient(180deg,#9bddff 0%, #5ba6f2 55%, #407fda 100%) !important;
  box-shadow: 0 9px 18px rgba(62, 126, 207, .22), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.binder-book .tiny-reveal:hover,
.binder-book .tiny-reveal:focus-visible {
  box-shadow:
    0 0 0 6px rgba(255,120,189,.16),
    0 11px 22px rgba(207, 62, 145, .30),
    inset 0 1px 0 rgba(255,255,255,.62) !important;
  transform: translateX(-50%) translateY(-1px) !important;
}

@media (max-width: 1200px) {
  .binder-book.starlight-binder-book,
  .binder-book { --button-h: 42px; --slot-pad: 7px; }
  .binder-book .binder-page { gap: 10px !important; }
}
@media (max-width: 760px) {
  .binder-book.starlight-binder-book,
  .binder-book { grid-template-columns: 1fr !important; --button-h: 42px; }
}

/* ==========================================================
   V57 Starlight Collection Album
   Replaces the old binder sleeve system on binder.html only.
   ========================================================== */
body[data-page="binder"] .binder-wrap { min-width: 0; }
body[data-page="binder"] #binderGrid.starlight-album {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(34px, 4vw, 58px) !important;
  min-height: 0 !important;
  padding: clamp(18px, 2vw, 30px) clamp(18px, 2.5vw, 36px) !important;
  overflow: visible !important;
  border-radius: 32px !important;
  border: 2px solid rgba(255, 170, 214, .62) !important;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 174, 225, .62), transparent 25%),
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .98), transparent 34%),
    radial-gradient(circle at 80% 12%, rgba(255, 231, 159, .42), transparent 28%),
    linear-gradient(90deg, rgba(255, 229, 242, .95), rgba(255, 251, 255, .96) 47%, rgba(255, 239, 248, .95) 53%, rgba(255, 253, 255, .96)) !important;
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,.60),
    inset 0 0 28px rgba(255, 120, 189, .17),
    0 24px 60px rgba(55, 76, 168, .16) !important;
  isolation: isolate;
}
body[data-page="binder"] #binderGrid.starlight-album::before,
body[data-page="binder"] #binderGrid.starlight-album::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  inset: 0 !important;
  display: block !important;
}
body[data-page="binder"] #binderGrid.starlight-album::before {
  background:
    radial-gradient(circle, rgba(255, 122, 190, .38) 0 2px, transparent 3px) 16px 24px/92px 92px,
    radial-gradient(circle, rgba(255, 203, 73, .42) 0 2px, transparent 3px) 55px 48px/118px 118px,
    radial-gradient(circle, rgba(117, 204, 255, .24) 0 2px, transparent 3px) 30px 60px/76px 76px !important;
  opacity: .50 !important;
  z-index: 0 !important;
  animation: albumSparkleDrift 16s linear infinite !important;
}
body[data-page="binder"] #binderGrid.starlight-album::after {
  border-radius: inherit !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.86),
    inset 0 0 0 12px rgba(255,255,255,.23),
    inset 0 -22px 40px rgba(255, 163, 213, .11) !important;
  z-index: 1 !important;
}
@keyframes albumSparkleDrift { 50% { transform: translateY(-8px); opacity: .30; } }

body[data-page="binder"] .album-glow {
  position: absolute;
  inset: 8px;
  border-radius: 28px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 30% 35%, rgba(255, 126, 196, .14), transparent 25%),
    radial-gradient(circle at 70% 32%, rgba(121, 207, 255, .14), transparent 25%),
    radial-gradient(circle at 50% 80%, rgba(255, 216, 92, .12), transparent 32%);
  filter: blur(.5px);
}
body[data-page="binder"] .album-spine {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 50%;
  width: 18px;
  transform: translateX(-50%);
  z-index: 3;
  border-radius: 999px;
  background: linear-gradient(90deg, #e9c7d2, #fff7fb 30%, #ce9eac 52%, #fff7fb 70%, #d99aaf);
  box-shadow:0 0 0 2px rgba(255,255,255,.76),0 8px 22px rgba(138,64,97,.28),inset 0 0 10px rgba(142,70,102,.20);
}
body[data-page="binder"] .album-spine span {
  position: absolute;
  left: 50%;
  width: 54px;
  height: 24px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #ffd4e3 48%, #c78394 52%, #fff4f8);
  box-shadow: 0 4px 10px rgba(88,45,66,.20), inset 0 0 0 2px rgba(166,102,123,.26);
}
body[data-page="binder"] .album-spine span:nth-child(1){ top: 24%; }
body[data-page="binder"] .album-spine span:nth-child(2){ top: 50%; }
body[data-page="binder"] .album-spine span:nth-child(3){ top: 76%; }

/* V58: the binder page no longer stretches rows taller than the card sleeve.
   Each card shell owns its own card-sized geometry, so there is no dead space. */
body[data-page="binder"] .album-page {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  align-content: start !important;
  gap: clamp(14px, 1.4vw, 20px) !important;
  min-height: clamp(710px, 74vh, 860px) !important;
  padding: clamp(14px, 1.5vw, 22px) !important;
  overflow: visible !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255,180,219,.52) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,241,248,.70)), radial-gradient(circle at 50% 40%, rgba(255,255,255,.90), transparent 60%) !important;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.48), inset 0 0 22px rgba(255,148,207,.10), 0 12px 26px rgba(49,78,168,.09) !important;
}
body[data-page="binder"] .album-page::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 21px;
  pointer-events: none;
  border: 1px dashed rgba(255,143,205,.32);
  opacity: .74;
}
body[data-page="binder"] .album-card-shell {
  --control-h: 46px;
  --card-gap: 8px;
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-rows: auto var(--control-h) !important;
  gap: var(--card-gap) !important;
  min-width: 0 !important;
  width: 100% !important;
  aspect-ratio: 5 / 8.25 !important;
  padding: 8px !important;
  border-radius: 22px !important;
  overflow: visible !important;
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,235,246,.64)) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.82), 0 10px 24px rgba(29,76,168,.08) !important;
}
body[data-page="binder"] .album-card-shell.album-empty {
  opacity: .34 !important;
  display: grid !important;
  place-items: center !important;
  grid-template-rows: 1fr !important;
  background: linear-gradient(145deg, rgba(255,255,255,.55), rgba(255,231,244,.38)) !important;
}
body[data-page="binder"] .album-empty-star { font-size: clamp(2.5rem, 5vw, 4rem); color: rgba(244,98,170,.18); text-shadow: 0 1px 0 rgba(255,255,255,.9); }
body[data-page="binder"] .album-card-shell:hover,
body[data-page="binder"] .album-card-shell:focus-within { z-index: 30 !important; }
body[data-page="binder"] .album-card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 5 / 7 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  overflow: visible !important;
  background: transparent !important;
  cursor: pointer !important;
  transform: translateY(0) rotate(0deg) !important;
  transition: transform .28s cubic-bezier(.2,.85,.2,1), filter .28s ease !important;
  animation: albumCardIdle 5.4s ease-in-out infinite !important;
  animation-delay: var(--float-delay, 0s) !important;
  will-change: transform, filter;
  justify-self: stretch !important;
  align-self: start !important;
}
@keyframes albumCardIdle { 0%,100% { transform: translateY(0) rotate(-.25deg); } 50% { transform: translateY(-4px) rotate(.25deg); } }
body[data-page="binder"] .album-card-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 13px !important;
  box-shadow: 0 12px 24px rgba(11,50,145,.16), 0 0 0 2px rgba(255,255,255,.80) !important;
  background: rgba(255,255,255,.30) !important;
  transition: filter .24s ease, box-shadow .24s ease !important;
}
body[data-page="binder"] .album-card-aura {
  position: absolute !important;
  inset: -10px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 22px !important;
  background: radial-gradient(circle at 22% 18%, rgba(255,255,255,.95), transparent 10%), radial-gradient(circle at 78% 20%, rgba(255,221,90,.50), transparent 14%), radial-gradient(circle at 50% 96%, rgba(255,121,190,.42), transparent 32%);
  filter: blur(8px) !important;
  opacity: .25 !important;
  transform: scale(.96) !important;
  transition: opacity .24s ease, transform .24s ease !important;
}
body[data-page="binder"] .album-card:hover,
body[data-page="binder"] .album-card:focus-visible {
  animation: albumCardHoverFloat 1.8s ease-in-out infinite !important;
  transform: translateY(-16px) rotate(-1deg) !important;
  filter: drop-shadow(0 20px 24px rgba(43,78,178,.20)) drop-shadow(0 0 24px rgba(255,112,190,.30)) !important;
  outline: none !important;
}
@keyframes albumCardHoverFloat { 0%,100% { transform: translateY(-16px) rotate(-1.2deg); } 50% { transform: translateY(-22px) rotate(1.2deg); } }
body[data-page="binder"] .album-card:hover .album-card-img,
body[data-page="binder"] .album-card:focus-visible .album-card-img { filter: brightness(1.04) saturate(1.07) !important; box-shadow: 0 22px 32px rgba(11,50,145,.22), 0 0 0 3px rgba(255,255,255,.94), 0 0 28px rgba(255,115,194,.48), 0 0 42px rgba(255,214,80,.26) !important; }
body[data-page="binder"] .album-card:hover .album-card-aura,
body[data-page="binder"] .album-card:focus-visible .album-card-aura { opacity: .72 !important; transform: scale(1.08) !important; }
body[data-page="binder"] .album-card::after {
  content: "✦" !important; position: absolute !important; right: -6px !important; top: -9px !important; z-index: 5 !important; color: #ff75bf !important; font-size: 1.05rem !important; text-shadow: 0 0 8px rgba(255,255,255,.95), 0 0 12px rgba(255,97,183,.58) !important; opacity: .70 !important; animation: albumTinyStar 2.4s ease-in-out infinite !important;
}
@keyframes albumTinyStar { 50% { transform: scale(1.22) rotate(15deg); opacity: 1; } }
body[data-page="binder"] .album-number,
body[data-page="binder"] .album-fav { position: absolute !important; z-index: 6 !important; pointer-events: none !important; }
body[data-page="binder"] .album-number { left: -2px !important; top: -3px !important; min-width: 44px !important; text-align: center !important; padding: 5px 8px !important; border-radius: 999px !important; background: linear-gradient(180deg,#4f8cff,#1454cf) !important; color:#fff !important; font-weight:900 !important; font-size:.86rem !important; box-shadow:0 5px 12px rgba(18,78,203,.26) !important; }
body[data-page="binder"] .album-fav { right:-4px !important; top:-7px !important; color:#ff6fbc !important; font-size:1.08rem !important; text-shadow:0 0 7px rgba(255,255,255,1),0 0 10px rgba(255,105,190,.54) !important; }
body[data-page="binder"] .album-control { position: relative !important; z-index: 8 !important; display: grid !important; align-items: center !important; }
body[data-page="binder"] .album-control .tiny-reveal { position: static !important; transform: none !important; width: 100% !important; height: 42px !important; padding: 0 14px !important; border: 0 !important; border-radius: 999px !important; font-size: .92rem !important; letter-spacing: .02em !important; color: #fff !important; background: linear-gradient(180deg,#ff9bd1 0%,#ff57b3 45%,#d14e96 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.55),0 8px 18px rgba(255,79,167,.25) !important; animation: none !important; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important; }
body[data-page="binder"] .album-control .tiny-reveal:hover,
body[data-page="binder"] .album-control .tiny-reveal:focus-visible { transform: translateY(-2px) scale(1.03) !important; filter: brightness(1.04) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.62),0 0 0 5px rgba(255,120,189,.16),0 12px 22px rgba(255,79,167,.32) !important; }
body[data-page="binder"] .album-card-shell.is-collected .album-control .tiny-reveal { background: linear-gradient(180deg,#92d7ff 0%,#5ba5f3 55%,#3f82d9 100%) !important; }
body[data-page="binder"] .obscured { filter: brightness(.80) saturate(.92) blur(.25px) !important; }

@media (max-width: 1450px) {
  body[data-page="binder"] .album-page { min-height: clamp(620px, 68vh, 760px) !important; }
  body[data-page="binder"] .album-card-shell { --control-h: 44px; padding: 8px !important; }
  body[data-page="binder"] .album-control .tiny-reveal { height: 38px !important; font-size: .84rem !important; }
}
@media (max-width: 1180px) {
  body[data-page="binder"] #binderGrid.starlight-album { grid-template-columns: 1fr !important; }
  body[data-page="binder"] .album-spine { display: none !important; }
  body[data-page="binder"] .album-page { min-height: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="binder"] .album-card,
  body[data-page="binder"] .album-card:hover,
  body[data-page="binder"] #binderGrid.starlight-album::before { animation: none !important; }
}

/* =========================
   V59: restore the stable V17 binder + two-face flip system.
   This block intentionally overrides the later experimental album/sleeve systems only on the binder page.
   ========================= */
body[data-page="binder"] .starlight-album,
body[data-page="binder"] .v59-v17-binder,
body[data-page="binder"] #binderGrid.binder-book{
  position:relative !important;
  min-height:535px !important;
  background:linear-gradient(90deg,#f6f1e9,#fff,#f6f1e9) !important;
  border-radius:28px !important;
  padding:22px 28px !important;
  box-shadow:inset 0 0 0 3px rgba(97,77,60,.12), var(--shadow) !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:32px !important;
  overflow:hidden !important;
}
body[data-page="binder"] #binderGrid.binder-book::before{
  content:"" !important;
  position:absolute !important;
  top:22px !important;
  bottom:22px !important;
  left:50% !important;
  width:12px !important;
  transform:translateX(-50%) !important;
  background:linear-gradient(90deg,#cbc0bb,#fff,#cbc0bb) !important;
  border-radius:999px !important;
  box-shadow:0 0 0 1px rgba(50,35,25,.12) !important;
  z-index:1 !important;
}
body[data-page="binder"] #binderGrid.binder-book::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:radial-gradient(circle at 50% 50%,transparent 45%,rgba(255,120,189,.06)) !important;
  z-index:0 !important;
}
body[data-page="binder"] .ring{
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:38px !important;
  height:18px !important;
  border:4px solid #b4858b !important;
  border-left:0 !important;
  border-right:0 !important;
  border-radius:999px !important;
  background:#ffd7df !important;
  z-index:3 !important;
}
body[data-page="binder"] .ring.r1{top:20% !important}
body[data-page="binder"] .ring.r2{top:40% !important}
body[data-page="binder"] .ring.r3{top:60% !important}
body[data-page="binder"] .ring.r4{top:80% !important}
body[data-page="binder"] .binder-page{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:14px !important;
  padding:8px !important;
  border-radius:20px !important;
  background:rgba(255,255,255,.45) !important;
  border:1px dashed rgba(61,97,150,.18) !important;
  z-index:2 !important;
  overflow:visible !important;
}
body[data-page="binder"] .slot{
  position:relative !important;
  min-width:0 !important;
  aspect-ratio:2.5/3.5 !important;
  border-radius:16px !important;
  background:linear-gradient(145deg,rgba(200,221,255,.55),rgba(255,219,237,.5)) !important;
  padding:7px !important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75) !important;
  transform-style:preserve-3d !important;
  overflow:visible !important;
  z-index:1 !important;
}
body[data-page="binder"] .slot:hover,
body[data-page="binder"] .slot:focus-within{z-index:30 !important;}
body[data-page="binder"] .empty-slot{opacity:.38 !important;}
body[data-page="binder"] .card-tile{
  width:100% !important;
  height:100% !important;
  border:0 !important;
  padding:0 !important;
  background:none !important;
  perspective:1000px !important;
  cursor:pointer !important;
  position:relative !important;
  display:block !important;
  transform:none !important;
  filter:none !important;
  overflow:visible !important;
}
body[data-page="binder"] .card-inner{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  transition:transform .65s cubic-bezier(.2,.85,.2,1), filter .2s ease !important;
  transform-style:preserve-3d !important;
  animation:none !important;
}
body[data-page="binder"] .card-tile:hover .card-inner,
body[data-page="binder"] .card-tile:focus-visible .card-inner{
  transform:translateY(-8px) rotateX(9deg) rotateY(12deg) scale(1.035) !important;
  filter:drop-shadow(0 22px 26px rgba(8,39,125,.27)) !important;
}
body[data-page="binder"] .card-tile.tap-tilt .card-inner{transform:rotateY(14deg) scale(1.05) !important;}
body[data-page="binder"] .face,
.preview-card.flip-card .face,
.full-card-wrap.flip-card .face{
  position:absolute !important;
  inset:0 !important;
  border-radius:12px !important;
  overflow:hidden !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
  background:#fff !important;
  box-shadow:0 8px 16px rgba(13,60,148,.18) !important;
}
body[data-page="binder"] .face img,
.preview-card.flip-card .face img,
.full-card-wrap.flip-card .face img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  transform:none !important;
}
body[data-page="binder"] .front,
.preview-card.flip-card .front,
.full-card-wrap.flip-card .front{transform:rotateY(0deg) !important;}
body[data-page="binder"] .back,
.preview-card.flip-card .back,
.full-card-wrap.flip-card .back{transform:rotateY(180deg) !important; display:block !important;}
body[data-page="binder"] .badge{
  position:absolute !important;
  left:8px !important;
  top:8px !important;
  background:#0f49b7 !important;
  color:#fff !important;
  border-radius:8px !important;
  padding:3px 7px !important;
  font-size:.75rem !important;
  font-weight:900 !important;
  z-index:3 !important;
}
body[data-page="binder"] .fav{
  position:absolute !important;
  right:8px !important;
  top:8px !important;
  color:var(--pink) !important;
  font-size:1.05rem !important;
  text-shadow:0 1px 0 #fff !important;
  z-index:3 !important;
}
body[data-page="binder"] .tiny-reveal{
  position:absolute !important;
  left:50% !important;
  bottom:8px !important;
  transform:translateX(-50%) !important;
  z-index:10 !important;
  border:0 !important;
  border-radius:999px !important;
  padding:9px 15px !important;
  color:#fff !important;
  background:linear-gradient(180deg,#ff8bca,#ff4fa7) !important;
  font-size:.82rem !important;
  font-weight:900 !important;
  opacity:.94 !important;
  transition:.2s !important;
  box-shadow:0 8px 18px rgba(255,79,167,.25) !important;
  white-space:nowrap !important;
}
body[data-page="binder"] .tiny-reveal:hover,
body[data-page="binder"] .tiny-reveal:focus-visible{
  bottom:13px !important;
  transform:translateX(-50%) scale(1.08) !important;
  box-shadow:0 0 0 5px rgba(255,120,189,.18),0 12px 22px rgba(255,79,167,.32) !important;
}
body[data-page="binder"] .is-collected .tiny-reveal{background:linear-gradient(180deg,#7bcfff,#4a99ed) !important;}

/* V59 two-face spinning flip used by preview + full view. Back is always the real back image, not a mirrored front. */
.preview-card.flip-card,
.full-card-wrap.flip-card{
  perspective:1200px !important;
  transform-style:preserve-3d !important;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
}
.preview-card.flip-card .preview-inner,
.full-card-wrap.flip-card .full-inner{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  transform-style:preserve-3d !important;
  transition:transform .72s cubic-bezier(.2,.75,.2,1) !important;
}
.preview-card.flip-card.flipped .preview-inner,
.full-card-wrap.flip-card.flipped .full-inner{transform:rotateY(180deg) !important;}
.preview-card.flip-card:hover .preview-inner{filter:drop-shadow(0 18px 28px rgba(8,39,125,.22));}
.full-card-wrap.flip-card .full-inner{aspect-ratio:2.5/3.5 !important;}


/* V60: Binder/thumbnails removed intentionally. */
.blank-binder-space{
  min-height:64vh;
  border-radius:28px;
  background:linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,244,251,.38));
  border:1px solid rgba(255,159,211,.22);
  box-shadow:0 20px 60px rgba(111,139,255,.10);
}
body[data-page="binder"] .series-landing,
body[data-page="binder"] .binder-meta,
body[data-page="binder"] .workarea,
body[data-page="binder"] .binder-wrap,
body[data-page="binder"] .binder-book,
body[data-page="binder"] #binderGrid,
body[data-page="binder"] .detail{display:none!important;}


/* ===== V61: Starlight Booster + Magical Card Grid Reset ===== */
body[data-page="binder"] .main{gap:16px;}
body[data-page="binder"] .v61-hero{position:relative;overflow:visible;border-radius:28px;min-height:96px;border:1px solid rgba(255,255,255,.95);box-shadow:0 18px 44px rgba(93,70,190,.14), inset 0 0 0 1px rgba(255,155,210,.22);}
body[data-page="binder"].series-select #seriesGridStage{display:none!important;}
body[data-page="binder"]:not(.series-select) #seriesLanding{display:none!important;}
body[data-page="binder"].series-select .filters{display:none;}
body[data-page="binder"].series-select .search{visibility:hidden;}

.v61-series-stage,.v61-card-stage{position:relative;min-height:560px;border-radius:34px;overflow:hidden;border:1px solid rgba(255,255,255,.92);box-shadow:0 24px 70px rgba(54,56,160,.18);background:radial-gradient(circle at 50% 10%,rgba(255,255,255,.92),rgba(255,227,245,.72) 32%,rgba(216,236,255,.64) 72%),linear-gradient(135deg,rgba(255,255,255,.76),rgba(255,226,241,.62));isolation:isolate;}
.v61-series-stage:before,.v61-card-stage:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 24%,rgba(255,120,189,.20),transparent 26%),radial-gradient(circle at 84% 18%,rgba(255,200,74,.18),transparent 26%),radial-gradient(circle at 50% 100%,rgba(151,118,255,.16),transparent 45%);}
.v61-series-stage:after,.v61-card-stage:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.98) 0 2px,transparent 3px),radial-gradient(circle,rgba(255,120,189,.45) 0 1.5px,transparent 2.5px),radial-gradient(circle,rgba(255,205,79,.50) 0 1.4px,transparent 2.3px);background-size:130px 130px,92px 92px,155px 155px;opacity:.76;animation:v61StarDrift 12s linear infinite;}
@keyframes v61StarDrift{to{background-position:0 -130px,92px -92px,-155px -155px}}
.v61-splash-inner{position:relative;z-index:2;display:grid;place-items:center;gap:28px;min-height:560px;padding:48px 28px;text-align:center;}
.v61-splash-title h2{margin:.1rem 0;font-size:clamp(2.2rem,5vw,4.5rem);line-height:.98;color:#ff55a9;text-shadow:0 3px 0 white,0 0 24px rgba(255,105,188,.35);font-style:italic;}
.v61-splash-title p{margin:8px 0 0;font-weight:900;color:#335cb4;letter-spacing:.08em;text-transform:uppercase;}
.v61-pack-row{display:flex;align-items:end;justify-content:center;gap:clamp(28px,6vw,90px);flex-wrap:wrap;width:100%;}
.v61-pack{appearance:none;border:0;background:transparent;cursor:pointer;position:relative;display:grid;justify-items:center;gap:16px;color:var(--navy);filter:drop-shadow(0 18px 24px rgba(65,52,145,.25));}
.v61-pack img{display:block;width:clamp(190px,22vw,310px);max-width:100%;height:auto;object-fit:contain;animation:v61PackFloat 3.8s ease-in-out infinite;transform-origin:50% 60%;transition:filter .22s ease,transform .22s ease;}
.v61-pack:before{content:"";position:absolute;left:50%;top:50%;width:78%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-44%);background:radial-gradient(circle,rgba(255,255,255,.62),rgba(255,120,189,.28) 42%,transparent 70%);opacity:.45;filter:blur(6px);animation:v61AuraPulse 2.8s ease-in-out infinite;z-index:-1;}
.v61-pack:hover img,.v61-pack:focus-visible img{transform:translateY(-12px) scale(1.04) rotate(1deg);filter:drop-shadow(0 0 18px rgba(255,255,255,.9)) drop-shadow(0 0 34px rgba(255,83,177,.65)) saturate(1.14);}
.v61-pack:hover:before,.v61-pack:focus-visible:before{opacity:.9;filter:blur(3px);}
.v61-pack-label{display:inline-grid;gap:3px;padding:12px 24px;border-radius:999px;background:linear-gradient(180deg,#ff9bd1,#ff51aa);color:white;font-weight:950;box-shadow:0 0 0 4px rgba(255,255,255,.55),0 12px 30px rgba(255,80,170,.30);text-shadow:0 2px 0 rgba(150,0,88,.26);}
.v61-pack-label small{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:#fff5fb;}
@keyframes v61PackFloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}
@keyframes v61AuraPulse{50%{transform:translate(-50%,-44%) scale(1.12);opacity:.72}}

.v61-grid-shell{position:relative;z-index:2;padding:24px clamp(14px,2.4vw,34px) 34px;}
.v61-grid-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px;}
.v61-grid-head h2{margin:0;color:#fff;text-shadow:0 2px 0 #d33d93,0 0 22px rgba(255,84,177,.55);font-size:clamp(1.7rem,3.4vw,3.2rem);font-style:italic;}
.v61-grid-head p{margin:4px 0 0;color:#fff;font-weight:900;text-shadow:0 2px 8px rgba(18,53,140,.3);}
.v61-back-btn,.v61-count-pill{border:0;border-radius:999px;padding:12px 18px;font-weight:950;box-shadow:0 0 0 4px rgba(255,255,255,.32),0 12px 24px rgba(76,75,175,.16);}
.v61-back-btn{background:linear-gradient(180deg,#fff,#ffe3f3);color:#d93491;cursor:pointer;}
.v61-count-pill{background:rgba(255,255,255,.72);color:#1946a2;}
.v61-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:28px clamp(16px,2.4vw,34px);align-items:start;}
.v61-card-slot{position:relative;display:grid;justify-items:center;gap:10px;min-height:300px;overflow:visible;}
.v61-card-btn{appearance:none;border:0;background:transparent;position:relative;cursor:pointer;width:min(190px,100%);aspect-ratio:750/1050;display:block;isolation:isolate;animation:v61CardIdle 4.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * -0.29s);transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease;filter:drop-shadow(0 12px 15px rgba(71,65,165,.18));}
.v61-card-btn img{width:100%;height:100%;object-fit:contain;display:block;border-radius:10px;}
.v61-card-btn:before{content:"";position:absolute;inset:-10px;border-radius:18px;background:radial-gradient(circle at 50% 58%,rgba(255,255,255,.48),rgba(255,136,202,.24) 42%,transparent 72%);opacity:.45;z-index:-1;filter:blur(3px);transition:opacity .2s ease,transform .2s ease;}
.v61-card-btn:after{content:"✦";position:absolute;right:-13px;top:5px;color:#ff66b6;font-size:1.28rem;text-shadow:0 0 10px white,0 0 16px rgba(255,82,173,.6);opacity:.76;animation:v61Twinkle 2.4s ease-in-out infinite;}
.v61-card-btn:hover,.v61-card-btn:focus-visible{transform:translateY(-16px) scale(1.075) rotate(-1.5deg);filter:drop-shadow(0 18px 24px rgba(39,64,165,.24)) drop-shadow(0 0 18px rgba(255,93,181,.42));z-index:10;}
.v61-card-btn:hover:before,.v61-card-btn:focus-visible:before{opacity:1;transform:scale(1.09);}
.v61-card-btn:hover img,.v61-card-btn:focus-visible img{box-shadow:0 0 0 3px rgba(255,255,255,.75),0 0 24px rgba(255,99,188,.42),0 0 34px rgba(255,205,90,.22);}
.v61-reveal{appearance:none;border:0;border-radius:999px;padding:12px 24px;min-width:138px;background:linear-gradient(180deg,#ff9bd1,#ff48a8 62%,#d43f91);color:#fff;font-weight:950;letter-spacing:.02em;box-shadow:0 0 0 4px rgba(255,255,255,.52),0 11px 24px rgba(255,79,167,.28);cursor:pointer;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;}
.v61-reveal:hover,.v61-reveal:focus-visible{transform:translateY(-3px) scale(1.05);filter:brightness(1.05);box-shadow:0 0 0 6px rgba(255,143,209,.24),0 0 24px rgba(255,79,167,.42),0 14px 30px rgba(255,79,167,.32);}
.v61-card-slot.is-collected .v61-reveal{background:linear-gradient(180deg,#9bdcff,#5ba9f2 60%,#458be2);}
@keyframes v61CardIdle{0%,100%{transform:translateY(0) rotate(-.45deg)}50%{transform:translateY(-6px) rotate(.45deg)}}
@keyframes v61Twinkle{0%,100%{transform:scale(.88) rotate(-8deg);opacity:.55}50%{transform:scale(1.18) rotate(8deg);opacity:1}}
@media(max-width:900px){.v61-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:22px 14px}.v61-card-slot{min-height:260px}.v61-card-btn{width:min(155px,100%)}.v61-splash-inner{padding:30px 14px}.v61-pack img{width:190px}}

/* ===== V62: Right-side selected card showcase for booster/card grid ===== */
body[data-page="binder"] .main{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  align-items:start;
  gap:16px;
}
body[data-page="binder"] .topbar,
body[data-page="binder"] .series-hero,
body[data-page="binder"] #seriesLanding{
  grid-column:1 / -1;
}
body[data-page="binder"].series-select #v62Showcase{display:none!important;}
body[data-page="binder"]:not(.series-select) #seriesGridStage{grid-column:1;}
.v62-showcase{
  grid-column:2;
  position:sticky;
  top:92px;
  align-self:start;
  min-height:520px;
  border-radius:30px;
  padding:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,244,251,.82));
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 22px 55px rgba(62,65,155,.14), inset 0 0 0 1px rgba(255,137,202,.18);
  overflow:hidden;
}
.v62-showcase:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 90% 9%,rgba(255,101,184,.18),transparent 28%),
    radial-gradient(circle at 8% 86%,rgba(125,196,255,.18),transparent 28%),
    radial-gradient(circle,rgba(255,255,255,.95) 0 1.5px,transparent 2.5px);
  background-size:auto,auto,92px 92px;
  opacity:.75;
  animation:v61StarDrift 16s linear infinite;
}
.v62-panel-inner{position:relative;z-index:1;display:grid;gap:14px;justify-items:center;}
.v62-panel-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;width:100%;}
.v62-panel-actions .btn{padding:12px 18px;border-radius:18px;}
.v62-preview-card{
  appearance:none;
  border:0;
  background:transparent;
  width:min(292px,92%);
  aspect-ratio:750/1050;
  cursor:pointer;
  perspective:1200px;
  filter:drop-shadow(0 18px 26px rgba(45,54,143,.20));
  padding:10px;
  box-sizing:border-box;
}
.v62-preview-card .preview-inner{position:relative;display:block;width:100%;height:100%;transition:transform .62s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;overflow:visible;}
.v62-preview-card.flipped .preview-inner{transform:rotateY(180deg);}
.v62-preview-card .face{position:absolute;inset:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.v62-preview-card .face.back{transform:rotateY(180deg);}
.v62-preview-card img{width:100%;height:100%;object-fit:contain;display:block;border-radius:14px;}
.v62-card-info{width:100%;color:var(--navy);}
.v62-card-info h2{font-size:1.45rem;line-height:1.1;margin:0 0 8px;color:#17308a;}
.v62-info-list{display:grid;gap:0;margin:12px 0;border-top:1px solid rgba(54,88,170,.14);}
.v62-info-list p{display:flex;justify-content:space-between;gap:10px;margin:0;padding:8px 0;border-bottom:1px solid rgba(54,88,170,.14);font-weight:800;}
.v62-info-list b{color:#385ca8;}
.v62-info-list span{text-align:right;color:#1c3d9a;}
.v62-description{margin:10px 0 0;color:#2e4fa2;line-height:1.35;font-weight:750;}
.v62-panel-buttons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;width:100%;}
.v62-empty-showcase{position:relative;z-index:1;display:grid;place-items:center;text-align:center;min-height:450px;color:#2449a4;}
@media(max-width:1180px){
  body[data-page="binder"] .main{grid-template-columns:1fr;}
  body[data-page="binder"] #seriesGridStage,
  .v62-showcase{grid-column:1 / -1;position:relative;top:auto;}
  .v62-showcase{min-height:auto;}
}


/* ===== V63: fix selected-card sidebar preview cropping only ===== */
.v62-showcase .v62-preview-card,
.detail .preview-card{
  box-sizing:border-box;
  padding:10px;
  overflow:visible;
}
.v62-showcase .v62-preview-card .preview-inner,
.detail .preview-card .preview-inner{
  overflow:visible;
}
.v62-showcase .v62-preview-card .face,
.detail .preview-card .face{
  overflow:visible;
}
.v62-showcase .v62-preview-card img,
.detail .preview-card img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  display:block;
}

/* ===== V64: Flip must show actual official card back, not mirrored front ===== */
.preview-card.flip-card,
.v62-preview-card.flip-card,
.full-card-wrap.flip-card{
  perspective:1200px;
}
.preview-card.flip-card .preview-inner,
.v62-preview-card.flip-card .preview-inner,
.full-card-wrap.flip-card .full-inner{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  transform-style:preserve-3d!important;
  transition:transform .62s cubic-bezier(.2,.8,.2,1)!important;
}
.preview-card.flip-card.flipped .preview-inner,
.v62-preview-card.flip-card.flipped .preview-inner,
.full-card-wrap.flip-card.flipped .full-inner{
  transform:rotateY(180deg)!important;
}
.preview-card.flip-card .face,
.v62-preview-card.flip-card .face,
.full-card-wrap.flip-card .face{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
.preview-card.flip-card .face.front,
.v62-preview-card.flip-card .face.front,
.full-card-wrap.flip-card .face.front{
  transform:rotateY(0deg)!important;
}
.preview-card.flip-card .face.back,
.v62-preview-card.flip-card .face.back,
.full-card-wrap.flip-card .face.back{
  transform:rotateY(180deg)!important;
}
.preview-card.flip-card .face.back img,
.v62-preview-card.flip-card .face.back img,
.full-card-wrap.flip-card .face.back img{
  content:url("../site_assets/StarlightCard_Back_NewLogo.png")!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
}
.preview-card.flip-card .face.front img,
.v62-preview-card.flip-card .face.front img,
.full-card-wrap.flip-card .face.front img{
  transform:none!important;
}

/* ===== V65: Flip shows official card back by swapping the visible face image ===== */
.preview-card.flip-card .face.back,
.v62-preview-card.flip-card .face.back,
.full-card-wrap.flip-card .face.back{
  display:none !important;
}
.preview-card.flip-card .preview-inner,
.v62-preview-card.flip-card .preview-inner,
.full-card-wrap.flip-card .full-inner,
.preview-card.flip-card.flipped .preview-inner,
.v62-preview-card.flip-card.flipped .preview-inner,
.full-card-wrap.flip-card.flipped .full-inner{
  transform:none !important;
}
.preview-card.flip-card .face.front,
.v62-preview-card.flip-card .face.front,
.full-card-wrap.flip-card .face.front{
  transform:none !important;
  backface-visibility:visible !important;
  -webkit-backface-visibility:visible !important;
}
.preview-card.flip-card.showing-card-back .face.front img,
.v62-preview-card.flip-card.showing-card-back .face.front img,
.full-card-wrap.flip-card.showing-card-back .face.front img{
  content:url("../site_assets/StarlightCard_Back_NewLogo.png") !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
}

/* ===== V66: unified smooth card flip + faster visible loading ===== */
.preview-card.flip-card,
.v62-preview-card.flip-card,
.full-card-wrap.flip-card{
  perspective: 1400px !important;
  transform-style: preserve-3d !important;
}
.preview-card.flip-card .preview-inner,
.v62-preview-card.flip-card .preview-inner,
.full-card-wrap.flip-card .full-inner{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  transform-style: preserve-3d !important;
  transition: transform .68s cubic-bezier(.18,.82,.2,1) !important;
  will-change: transform;
}
.preview-card.flip-card.flipped .preview-inner,
.v62-preview-card.flip-card.flipped .preview-inner,
.full-card-wrap.flip-card.flipped .full-inner{
  transform: rotateY(180deg) !important;
}
.preview-card.flip-card .face,
.v62-preview-card.flip-card .face,
.full-card-wrap.flip-card .face{
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  overflow: visible !important;
}
.preview-card.flip-card .face.front,
.v62-preview-card.flip-card .face.front,
.full-card-wrap.flip-card .face.front{
  transform: rotateY(0deg) !important;
}
.preview-card.flip-card .face.back,
.v62-preview-card.flip-card .face.back,
.full-card-wrap.flip-card .face.back{
  display: block !important;
  transform: rotateY(180deg) !important;
}
.preview-card.flip-card .face.front img,
.preview-card.flip-card .face.back img,
.v62-preview-card.flip-card .face.front img,
.v62-preview-card.flip-card .face.back img,
.full-card-wrap.flip-card .face.front img,
.full-card-wrap.flip-card .face.back img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}
.preview-card.flip-card .face.back img,
.v62-preview-card.flip-card .face.back img,
.full-card-wrap.flip-card .face.back img{
  content: url("../site_assets/StarlightCard_Back_NewLogo.png") !important;
}
.preview-card.flip-card.flip-spinning .preview-inner,
.v62-preview-card.flip-card.flip-spinning .preview-inner,
.full-card-wrap.flip-card.flip-spinning .full-inner{
  transition: transform .68s cubic-bezier(.18,.82,.2,1) !important;
  filter: drop-shadow(0 0 18px rgba(255, 122, 199, .30));
}
/* Keep card render crisp during hover/open; browser-specific smoothing helps prevent soft blur. */
.card-tile img,
.v61-card-btn img,
.v62-preview-card img,
.preview-card img,
.full-card-wrap img{
  image-rendering: auto;
  transform: translateZ(0);
}

/* ===== V67: stable two-face card flip + reveal image warm display ===== */
.preview-card.flip-card,
.v62-preview-card.flip-card,
.full-card-wrap.flip-card{
  perspective:1400px !important;
  transform-style:preserve-3d !important;
}
.preview-card.flip-card .preview-inner,
.v62-preview-card.flip-card .preview-inner,
.full-card-wrap.flip-card .full-inner{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  transform-style:preserve-3d !important;
  transition:transform .72s cubic-bezier(.18,.82,.2,1) !important;
  will-change:transform !important;
  overflow:visible !important;
}
.preview-card.flip-card.flipped .preview-inner,
.v62-preview-card.flip-card.flipped .preview-inner,
.full-card-wrap.flip-card.flipped .full-inner{
  transform:rotateY(180deg) !important;
}
.preview-card.flip-card .face,
.v62-preview-card.flip-card .face,
.full-card-wrap.flip-card .face{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  overflow:visible !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
}
.preview-card.flip-card .face.front,
.v62-preview-card.flip-card .face.front,
.full-card-wrap.flip-card .face.front{
  transform:rotateY(0deg) !important;
}
.preview-card.flip-card .face.back,
.v62-preview-card.flip-card .face.back,
.full-card-wrap.flip-card .face.back{
  transform:rotateY(180deg) !important;
}
.preview-card.flip-card .face.front img,
.preview-card.flip-card .face.back img,
.v62-preview-card.flip-card .face.front img,
.v62-preview-card.flip-card .face.back img,
.full-card-wrap.flip-card .face.front img,
.full-card-wrap.flip-card .face.back img{
  content:normal !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  transform:none !important;
  border-radius:18px !important;
}
.preview-card.flip-card .face.back img,
.v62-preview-card.flip-card .face.back img,
.full-card-wrap.flip-card .face.back img{
  content:normal !important;
}
.full-card-wrap.flip-card{
  width:min(430px,70vw) !important;
  aspect-ratio:750/1050 !important;
}
.full-card-wrap.flip-card .full-inner{
  aspect-ratio:750/1050 !important;
}
.full-card-wrap.flip-card.flip-spinning .full-inner,
.preview-card.flip-card.flip-spinning .preview-inner,
.v62-preview-card.flip-card.flip-spinning .preview-inner{
  filter:drop-shadow(0 0 18px rgba(255,122,199,.32));
}
.reveal-clean-face img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
}
.reveal-clean-card,
.reveal-clean-inner,
.reveal-clean-face{
  overflow:visible !important;
}

/* =========================================================
   V68: unified clean flip behavior + preload-safe reveal
   - Preview/sidebar and Full View use the same spin-swap animation.
   - The back is always the real StarlightCard_Back_NewLogo.png image, never a mirrored front.
   ========================================================= */
.preview-card.simple-flip,
.v62-preview-card.simple-flip,
.full-card-wrap.simple-flip {
  perspective: 1100px !important;
  overflow: visible !important;
}
.preview-card.simple-flip .preview-inner,
.v62-preview-card.simple-flip .preview-inner,
.full-card-wrap.simple-flip .full-inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  transform-style: preserve-3d !important;
  transition: none !important;
}
.preview-card.simple-flip .face,
.v62-preview-card.simple-flip .face,
.full-card-wrap.simple-flip .face {
  position: absolute !important;
  inset: 0 !important;
  transform: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.preview-card.simple-flip .face img,
.v62-preview-card.simple-flip .face img,
.full-card-wrap.simple-flip .face img {
  content: normal !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}
.preview-card.simple-flip:not(.show-back) .face.front,
.v62-preview-card.simple-flip:not(.show-back) .face.front,
.full-card-wrap.simple-flip:not(.show-back) .face.front {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.preview-card.simple-flip.show-back .face.back,
.v62-preview-card.simple-flip.show-back .face.back,
.full-card-wrap.simple-flip.show-back .face.back {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.preview-card.simple-flip.flipped .preview-inner,
.preview-card.simple-flip.flipped:hover .preview-inner,
.v62-preview-card.simple-flip.flipped .preview-inner,
.v62-preview-card.simple-flip.flipped:hover .preview-inner,
.full-card-wrap.simple-flip.flipped .full-inner,
.full-card-wrap.simple-flip.flipped:hover .full-inner {
  transform: none !important;
}
.preview-card.simple-flip.spin-flip .preview-inner,
.v62-preview-card.simple-flip.spin-flip .preview-inner,
.full-card-wrap.simple-flip.spin-flip .full-inner {
  animation: v68CleanCardSpin .62s cubic-bezier(.2,.85,.18,1) both !important;
}
@keyframes v68CleanCardSpin {
  0% { transform: rotateY(0deg) scale(1); filter: brightness(1); }
  42% { transform: rotateY(86deg) scale(.985); filter: brightness(1.25); }
  58% { transform: rotateY(86deg) scale(.985); filter: brightness(1.25); }
  100% { transform: rotateY(0deg) scale(1); filter: brightness(1); }
}


/* =========================================================
   V70: flip/reveal hardening
   - Sidebar + Full View flips use a single visible surface so card backs are never mirrored.
   - Back image remains preloaded and available.
   - First reveal front image is forced visible once the reveal phase begins.
   ========================================================= */
.preview-card.v70-flip-mode .preview-inner,
.v62-preview-card.v70-flip-mode .preview-inner,
.full-card-wrap.v70-flip-mode .full-inner {
  transform: none !important;
  transition: none !important;
}

.preview-card.v70-flip-mode .face,
.v62-preview-card.v70-flip-mode .face,
.full-card-wrap.v70-flip-mode .face {
  transform: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

.preview-card.v70-flip-mode .face.front,
.v62-preview-card.v70-flip-mode .face.front,
.full-card-wrap.v70-flip-mode .face.front {
  opacity: 1 !important;
  z-index: 2 !important;
}

.preview-card.v70-flip-mode .face.back,
.v62-preview-card.v70-flip-mode .face.back,
.full-card-wrap.v70-flip-mode .face.back {
  opacity: 0 !important;
  z-index: 1 !important;
}

.preview-card.v70-flip-mode .face img,
.v62-preview-card.v70-flip-mode .face img,
.full-card-wrap.v70-flip-mode .face img {
  transform: none !important;
  filter: none !important;
}

.preview-card.v70-flip-mode.spin-flip .preview-inner,
.v62-preview-card.v70-flip-mode.spin-flip .preview-inner,
.full-card-wrap.v70-flip-mode.spin-flip .full-inner {
  animation: v70CardFlipSpin .64s cubic-bezier(.18,.82,.2,1) both !important;
}

@keyframes v70CardFlipSpin {
  0% { transform: rotateY(0deg) scale(1); filter: brightness(1); }
  45% { transform: rotateY(88deg) scale(.985); filter: brightness(1.22); }
  55% { transform: rotateY(88deg) scale(.985); filter: brightness(1.22); }
  100% { transform: rotateY(0deg) scale(1); filter: brightness(1); }
}

.reveal-clean.phase-revealed .reveal-clean-front,
.reveal-clean-card.flipped .reveal-clean-front,
.reveal-clean-card.revealed .reveal-clean-front {
  opacity: 1 !important;
  visibility: visible !important;
}

.reveal-clean-face img {
  transform: none !important;
}


/* =========================================================
   V71: reveal card-back path fix
   The stylesheet lives in /css/, so card-back content URLs must use ../site_assets/.
   This prevents the first fresh-page reveal from showing a broken image icon.
   ========================================================= */
.reveal-clean-back img,
.preview-card .face.back img,
.v62-preview-card .face.back img,
.full-card-wrap .face.back img {
  content: url("../site_assets/StarlightCard_Back_NewLogo.png") !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  opacity: 1 !important;
}


.v61-card-btn,
.v62-preview-card .face.front,
.preview-card .face.front,
.full-card-wrap .face.front,
.collection-image,
.reveal-clean-front,
.reveal-clean-card .reveal-clean-front {
  position: relative !important;
  overflow: hidden !important;
}


@keyframes starlightV77AuroraPulse {
  0%, 100% {
    background-position:
      0 0, 0 0,
      14px 22px, 14px 22px,
      8px 36px, 8px 36px,
      20px 6px, 20px 6px,
      0% 44%, 90% 20%, 40% 95%, 0% 50%;
    filter: hue-rotate(0deg) saturate(1.26) brightness(1.03);
    opacity: .62;
  }
  35% {
    background-position:
      18px 26px, 18px 26px,
      34px 4px, 34px 4px,
      31px 52px, 31px 52px,
      6px 37px, 6px 37px,
      64% 30%, 18% 76%, 86% 24%, 86% 58%;
    filter: hue-rotate(32deg) saturate(1.52) brightness(1.10);
    opacity: .78;
  }
  70% {
    background-position:
      46px 8px, 46px 8px,
      7px 48px, 7px 48px,
      54px 15px, 54px 15px,
      48px 25px, 48px 25px,
      24% 88%, 78% 18%, 18% 68%, 42% 100%;
    filter: hue-rotate(-22deg) saturate(1.42) brightness(1.07);
    opacity: .72;
  }
}


/* =========================================================
   V78 booster scaling and sheet-driven series packs
   Uses Google Sheets boosterImageUrl / series metadata.
   ========================================================= */
.v78-splash-inner {
  width: min(1120px, 96vw) !important;
  margin: 0 auto !important;
}
.v78-pack-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: clamp(16px, 2.5vw, 28px) !important;
  align-items: stretch !important;
  justify-items: center !important;
}
.v61-pack.v78-pack {
  width: min(100%, 240px) !important;
  min-height: 360px !important;
  padding: 16px 14px !important;
}
.v61-pack.v78-pack img {
  width: min(165px, 78%) !important;
  max-height: 235px !important;
  object-fit: contain !important;
  margin: 0 auto 10px !important;
}
.v78-pack-desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: .78;
  font-size: .72rem !important;
  line-height: 1.2 !important;
  margin-top: 3px !important;
}
@media (max-width: 720px) {
  .v78-pack-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  }
  .v61-pack.v78-pack {
    width: min(100%, 190px) !important;
    min-height: 300px !important;
  }
  .v61-pack.v78-pack img {
    width: min(132px, 76%) !important;
    max-height: 190px !important;
  }
}


.detail-actions #previewHolo {
  order: 3;
}
.detail-actions .reveal-big {
  order: 1;
}
.detail-actions button[onclick^="toggleFavorite"] {
  order: 2;
}
.v78-splash-inner {
  width: min(980px, 94vw) !important;
}
.v78-pack-grid {
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)) !important;
  gap: clamp(12px, 2vw, 22px) !important;
}
.v61-pack.v78-pack {
  width: min(100%, 205px) !important;
  min-height: 305px !important;
  padding: 13px 12px !important;
}
.v61-pack.v78-pack img {
  width: min(138px, 74%) !important;
  max-height: 198px !important;
  margin-bottom: 8px !important;
}
.v61-pack.v78-pack .v61-pack-label small {
  margin-top: 4px !important;
}
.v78-pack-desc {
  display: none !important;
}
.reveal-clean.rarity-legendary .reveal-clean-card,
.reveal-clean.rarity-legendary .reveal-clean-card.charge,
.reveal-clean.rarity-legendary .reveal-clean-card.burst,
.reveal-clean.rarity-legendary .reveal-clean-card.revealed {
  transform: none;
}
.reveal-clean.rarity-legendary .reveal-clean-card:before {
  content: "";
  position: absolute;
  inset: -30px !important;
  border-radius: 40px !important;
  background:
    conic-gradient(from 0deg, rgba(255,230,100,0), rgba(255,230,100,.54), rgba(255,255,255,.78), rgba(115,220,255,.34), rgba(255,137,207,.36), rgba(255,230,100,.54), rgba(255,230,100,0)) !important;
  filter: blur(18px) saturate(1.15) !important;
  animation: spin 9s linear infinite !important;
  z-index: -1;
  pointer-events: none;
}
.reveal-clean.rarity-legendary.phase-burst:after {
  background: radial-gradient(circle, rgba(255,255,255,.68), rgba(255,229,102,.32) 34%, rgba(255,137,207,.18), transparent 72%) !important;
  transform: scale(1.28) !important;
  opacity: 1 !important;
}
.reveal-clean.rarity-legendary .reveal-clean-stars span {
  box-shadow: 0 0 18px #fff, 0 0 36px rgba(255,226,86,.95), 0 0 52px rgba(255,137,207,.62) !important;
}
@media (max-width: 720px) {
  .v61-pack.v78-pack {
    width: min(100%, 170px) !important;
    min-height: 268px !important;
  }
  .v61-pack.v78-pack img {
    width: min(116px, 72%) !important;
    max-height: 166px !important;
  }
}


.detail-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 10px !important;
}
.detail-actions .reveal-big {
  order: 1 !important;
  flex: 1 1 calc(50% - 5px) !important;
}
.detail-actions button[onclick^="toggleFavorite"] {
  order: 2 !important;
  flex: 1 1 calc(50% - 5px) !important;
}


.v79-pack-title-line {
  display: block !important;
  margin-top: 0 !important;
  color: #14348f !important;
  font-size: .84rem !important;
  line-height: 1.15 !important;
  white-space: normal !important;
}
.v61-pack.v78-pack {
  width: min(100%, 195px) !important;
  min-height: 286px !important;
}
.v61-pack.v78-pack img {
  width: min(126px, 72%) !important;
  max-height: 184px !important;
}


.reveal-clean.rarity-legendary .legendary-charge-field,
.reveal-clean.rarity-legendary .legendary-magic-explosion {
  position: absolute;
  inset: -90px;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.reveal-clean.rarity-legendary .legendary-charge-field span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(520px, 82vw);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.35);
  border: 3px dashed rgba(255,240,132,.58);
  box-shadow: 0 0 34px rgba(255,216,78,.34), inset 0 0 32px rgba(255,126,211,.18);
  opacity: 0;
}
.reveal-clean.rarity-legendary.phase-charge .legendary-charge-field span:nth-child(1) { animation: legendaryChargeRing 1.5s ease-out both; }
.reveal-clean.rarity-legendary.phase-charge .legendary-charge-field span:nth-child(2) { animation: legendaryChargeRing 1.5s .22s ease-out both reverse; border-style: solid; border-color: rgba(137,231,255,.44); }
.reveal-clean.rarity-legendary.phase-charge .legendary-charge-field span:nth-child(3) { animation: legendaryChargeRing 1.5s .44s ease-out both; border-color: rgba(255,141,214,.46); }
.reveal-clean.rarity-legendary .reveal-clean-card.charge {
  animation: v9RevealFloat 2.8s ease-in-out infinite, legendaryCardCharge .34s ease-in-out infinite !important;
}
.reveal-clean.rarity-legendary .reveal-clean-card.burst {
  animation: legendaryCardBurst .85s cubic-bezier(.16,.9,.22,1) both !important;
}
.reveal-clean.rarity-legendary.phase-burst .legendary-magic-explosion i {
  --angle: calc(var(--n) * 20deg);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  background: #fff6a8;
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 56%,79% 91%,50% 70%,21% 91%,32% 56%,2% 35%,39% 35%);
  filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 18px rgba(255,126,211,.85));
  transform: translate(-50%, -50%) rotate(var(--angle));
  animation: legendaryStarBoom .95s cubic-bezier(.13,.88,.2,1) both;
}
.legendary-magic-explosion i:nth-child(1){--n:0}.legendary-magic-explosion i:nth-child(2){--n:1}.legendary-magic-explosion i:nth-child(3){--n:2}.legendary-magic-explosion i:nth-child(4){--n:3}.legendary-magic-explosion i:nth-child(5){--n:4}.legendary-magic-explosion i:nth-child(6){--n:5}.legendary-magic-explosion i:nth-child(7){--n:6}.legendary-magic-explosion i:nth-child(8){--n:7}.legendary-magic-explosion i:nth-child(9){--n:8}.legendary-magic-explosion i:nth-child(10){--n:9}.legendary-magic-explosion i:nth-child(11){--n:10}.legendary-magic-explosion i:nth-child(12){--n:11}.legendary-magic-explosion i:nth-child(13){--n:12}.legendary-magic-explosion i:nth-child(14){--n:13}.legendary-magic-explosion i:nth-child(15){--n:14}.legendary-magic-explosion i:nth-child(16){--n:15}.legendary-magic-explosion i:nth-child(17){--n:16}.legendary-magic-explosion i:nth-child(18){--n:17}
@keyframes legendaryChargeRing {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.32) rotate(0deg); }
  18% { opacity: .9; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.06) rotate(170deg); }
}
@keyframes legendaryCardCharge {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); filter: drop-shadow(0 0 22px rgba(255,216,78,.45)); }
  25% { transform: translateY(-3px) scale(1.025) rotate(-.7deg); filter: drop-shadow(0 0 34px rgba(255,126,211,.62)); }
  50% { transform: translateY(2px) scale(1.045) rotate(.8deg); filter: drop-shadow(0 0 42px rgba(125,230,255,.66)); }
  75% { transform: translateY(-2px) scale(1.03) rotate(-.4deg); filter: drop-shadow(0 0 38px rgba(255,238,132,.78)); }
}
@keyframes legendaryCardBurst {
  0% { transform: scale(1.04) rotate(-1deg); filter: brightness(1.2) drop-shadow(0 0 34px rgba(255,229,91,.8)); }
  42% { transform: scale(1.22) rotate(2deg); filter: brightness(1.65) drop-shadow(0 0 76px rgba(255,255,255,1)); }
  100% { transform: scale(1) rotate(0deg); filter: brightness(1) drop-shadow(0 18px 30px rgba(20,48,120,.28)); }
}
@keyframes legendaryStarBoom {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(.35); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(min(310px, 38vw)) scale(1.55); }
}
@media (max-width: 720px) {
  .v61-pack.v78-pack { width: min(100%, 162px) !important; min-height: 250px !important; }
  .v61-pack.v78-pack img { width: min(108px, 70%) !important; max-height: 154px !important; }
}


.v62-panel-buttons,
.detail-actions:not(.top-actions-preview) {
  display: grid !important;
  gap: 10px !important;
}


/* Force flip containers back into a predictable two-face layout. */
.preview-card.flip-card,
.v62-preview-card.flip-card,
.full-card-wrap.flip-card {
  position: relative !important;
  transform-style: preserve-3d !important;
  perspective: 1100px !important;
  overflow: visible !important;
}
.preview-card .preview-inner,
.v62-preview-card .preview-inner,
.full-card-wrap .full-inner {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  transform-style: preserve-3d !important;
  transition: transform .55s cubic-bezier(.2,.8,.2,1) !important;
}
.preview-card .face,
.v62-preview-card .face,
.full-card-wrap .face {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
.preview-card .face.front,
.v62-preview-card .face.front,
.full-card-wrap .face.front { transform: rotateY(0deg) !important; z-index: 2 !important; }
.preview-card .face.back,
.v62-preview-card .face.back,
.full-card-wrap .face.back { transform: rotateY(180deg) !important; z-index: 1 !important; }
.preview-card.flipped .preview-inner,
.v62-preview-card.flipped .preview-inner,
.full-card-wrap.flipped .full-inner { transform: rotateY(180deg) !important; }
.preview-card .face img,
.v62-preview-card .face img,
.full-card-wrap .face img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 18px !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}
.preview-card .face.back img,
.v62-preview-card .face.back img,
.full-card-wrap .face.back img {
  content: url("../site_assets/StarlightCard_Back_NewLogo.png") !important;
}
.preview-card.flip-turning,
.v62-preview-card.flip-turning,
.full-card-wrap.flip-turning {
  animation: v793FlipPop .58s cubic-bezier(.18,.82,.2,1) both !important;
}
@keyframes v793FlipPop {
  0% { filter: brightness(1) drop-shadow(0 16px 24px rgba(8,39,125,.20)); }
  45% { filter: brightness(1.28) drop-shadow(0 22px 30px rgba(255,120,189,.30)); }
  100% { filter: brightness(1) drop-shadow(0 16px 24px rgba(8,39,125,.20)); }
}


@keyframes v793HoloAurora {
  0%,100% { background-position: 0% 30%, 100% 18%, 40% 96%, 0% 50%; opacity: .62; filter: hue-rotate(0deg) saturate(1.35) brightness(1.04); }
  35% { background-position: 70% 16%, 18% 78%, 88% 18%, 88% 58%; opacity: .86; filter: hue-rotate(34deg) saturate(1.65) brightness(1.13); }
  70% { background-position: 25% 88%, 80% 20%, 18% 70%, 38% 100%; opacity: .76; filter: hue-rotate(-24deg) saturate(1.50) brightness(1.09); }
}
@keyframes v793HoloStars {
  0%,100% { opacity: .54; transform: translate3d(0,0,0) scale(.92) rotate(0deg); }
  45% { opacity: 1; transform: translate3d(6px,-8px,0) scale(1.18) rotate(18deg); }
  72% { opacity: .70; transform: translate3d(-4px,5px,0) scale(1.02) rotate(-10deg); }
}

/* Legendary reveal: keep the current animation, but make the card silhouette charge, glow, and pop outward. */
.reveal-clean.rarity-legendary.phase-charge .reveal-clean-card {
  animation: v793LegendaryChargeShape 1.15s ease-in-out infinite !important;
}
.reveal-clean.rarity-legendary.phase-burst .reveal-clean-card,
.reveal-clean.rarity-legendary.phase-revealed .reveal-clean-card.revealed {
  animation: v793LegendaryCardExplosion .95s cubic-bezier(.16,.95,.18,1) both !important;
}
.reveal-clean.rarity-legendary .reveal-clean-card::before {
  content: "" !important;
  position: absolute !important;
  inset: -16px !important;
  border-radius: 30px !important;
  pointer-events: none !important;
  z-index: -1 !important;
  opacity: .0 !important;
  background: linear-gradient(135deg, rgba(255,226,80,.95), rgba(255,118,208,.70), rgba(108,232,255,.74), rgba(255,226,80,.88)) !important;
  filter: blur(12px) saturate(1.35) !important;
  animation: v793LegendaryShapeGlow 1.6s ease-in-out infinite !important;
}
.reveal-clean.rarity-legendary.phase-burst .reveal-clean-card::before,
.reveal-clean.rarity-legendary.phase-revealed .reveal-clean-card::before { opacity: .85 !important; }
@keyframes v793LegendaryChargeShape {
  0%,100% { transform: scale(1) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); filter: drop-shadow(0 20px 28px rgba(255,202,54,.28)); }
  50% { transform: scale(1.045) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); filter: drop-shadow(0 28px 42px rgba(255,202,54,.52)) drop-shadow(0 0 28px rgba(255,96,205,.36)); }
}
@keyframes v793LegendaryCardExplosion {
  0% { transform: scale(.94); filter: brightness(1.15) drop-shadow(0 0 20px rgba(255,225,80,.45)); }
  38% { transform: scale(1.18) translateY(-10px); filter: brightness(1.65) drop-shadow(0 0 44px rgba(255,225,80,.78)) drop-shadow(0 0 38px rgba(255,96,205,.52)); }
  68% { transform: scale(.985); filter: brightness(1.14) drop-shadow(0 0 26px rgba(108,232,255,.48)); }
  100% { transform: scale(1); filter: brightness(1) drop-shadow(0 24px 34px rgba(8,39,125,.28)); }
}
@keyframes v793LegendaryShapeGlow {
  0%,100% { opacity: .42; transform: scale(.98); }
  50% { opacity: .95; transform: scale(1.06); }
}


@keyframes v794HoloRainbowPulse {
  0%,100% {
    background-position: 0% 30%, 100% 18%, 40% 96%, 0% 50%, 0% 50%;
    opacity: .34;
    filter: hue-rotate(0deg) saturate(1.42) brightness(.98);
  }
  45% {
    background-position: 72% 16%, 18% 78%, 88% 18%, 74% 50%, 100% 50%;
    opacity: .56;
    filter: hue-rotate(44deg) saturate(1.9) brightness(1.06);
  }
  72% {
    background-position: 24% 88%, 80% 20%, 18% 70%, 38% 100%, 45% 100%;
    opacity: .44;
    filter: hue-rotate(-28deg) saturate(1.65) brightness(1.01);
  }
}
@keyframes v794HoloStarsSoft {
  0%,100% { opacity: .30; transform: translate3d(0,0,0) scale(.94) rotate(0deg); }
  48% { opacity: .62; transform: translate3d(5px,-7px,0) scale(1.14) rotate(16deg); }
  74% { opacity: .42; transform: translate3d(-4px,4px,0) scale(1.02) rotate(-9deg); }
}

.v78-splash-inner {
  width: min(1040px, 95vw) !important;
}
.v78-pack-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: clamp(14px, 2.25vw, 26px) !important;
}
.v61-pack.v78-pack {
  width: min(100%, 214px) !important;
  min-height: 300px !important;
  padding: 12px 11px !important;
  gap: 10px !important;
}
.v61-pack.v78-pack img {
  width: min(139px, 76%) !important;
  max-height: 203px !important;
  margin: 0 auto 6px !important;
}
.v61-pack.v78-pack .v61-pack-label {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: min(172px, 100%) !important;
  padding: 8px 14px !important;
  border-radius: 16px !important;
  line-height: 1.05 !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 9px 20px rgba(255,80,170,.24) !important;
}
.v61-pack.v78-pack .v61-pack-label small {
  margin: 0 !important;
  font-size: .68rem !important;
  line-height: 1.05 !important;
  letter-spacing: .075em !important;
}
.v61-pack.v78-pack .v61-pack-label .v79-pack-title-line {
  white-space: nowrap !important;
  font-size: .74rem !important;
  line-height: 1.05 !important;
}
@media (max-width: 720px) {
  .v78-pack-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; }
  .v61-pack.v78-pack { width: min(100%, 178px) !important; min-height: 266px !important; padding: 10px 9px !important; }
  .v61-pack.v78-pack img { width: min(122px, 74%) !important; max-height: 176px !important; }
  .v61-pack.v78-pack .v61-pack-label { min-width: min(148px, 100%) !important; padding: 7px 10px !important; }
  .v61-pack.v78-pack .v61-pack-label .v79-pack-title-line { font-size: .66rem !important; }
}


/* True two-face flip: never mirror the back artwork. */
.preview-card.simple-flip,
.v62-preview-card.simple-flip,
.full-card-wrap.simple-flip {
  perspective: 1200px !important;
  transform-style: preserve-3d !important;
  overflow: visible !important;
}
.preview-card.simple-flip .preview-inner,
.v62-preview-card.simple-flip .preview-inner,
.full-card-wrap.simple-flip .full-inner {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  transform-style: preserve-3d !important;
  transition: transform .58s cubic-bezier(.2,.82,.2,1) !important;
}
.preview-card.simple-flip .face,
.v62-preview-card.simple-flip .face,
.full-card-wrap.simple-flip .face {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
}
.preview-card.simple-flip .face.front,
.v62-preview-card.simple-flip .face.front,
.full-card-wrap.simple-flip .face.front {
  transform: rotateY(0deg) translateZ(.1px) !important;
  opacity: 1 !important;
}
.preview-card.simple-flip .face.back,
.v62-preview-card.simple-flip .face.back,
.full-card-wrap.simple-flip .face.back {
  transform: rotateY(180deg) translateZ(.1px) !important;
  opacity: 1 !important;
}
.preview-card.simple-flip .face img,
.v62-preview-card.simple-flip .face img,
.full-card-wrap.simple-flip .face img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  transform: none !important;
  scale: 1 !important;
}
.preview-card.simple-flip.flipped .preview-inner,
.preview-card.simple-flip.show-back .preview-inner,
.v62-preview-card.simple-flip.flipped .preview-inner,
.v62-preview-card.simple-flip.show-back .preview-inner,
.full-card-wrap.simple-flip.flipped .full-inner,
.full-card-wrap.simple-flip.show-back .full-inner {
  transform: rotateY(180deg) !important;
}
.preview-card.simple-flip.flip-turning .preview-inner,
.v62-preview-card.simple-flip.flip-turning .preview-inner,
.full-card-wrap.simple-flip.flip-turning .full-inner {
  animation: v795SimpleCardSpin .58s cubic-bezier(.2,.82,.2,1) both !important;
}
@keyframes v795SimpleCardSpin {
  0% { filter: drop-shadow(0 12px 18px rgba(8,39,125,.18)); }
  45% { scale: 1.045; filter: drop-shadow(0 24px 34px rgba(255,79,167,.22)); }
  100% { scale: 1; filter: drop-shadow(0 16px 24px rgba(8,39,125,.20)); }
}


@keyframes v795HoloStarDrift {
  0%,100% { transform: translate3d(0,0,0) scale(.88) rotate(0deg); opacity: .42; }
  42% { transform: translate3d(7px,-9px,0) scale(1.2) rotate(18deg); opacity: .88; }
  72% { transform: translate3d(-5px,5px,0) scale(1.02) rotate(-12deg); opacity: .62; }
}

/* Booster splash button rebuild. */
.v61-pack.v78-pack {
  width: min(100%, 220px) !important;
  min-height: 304px !important;
  padding: 13px 12px 15px !important;
  gap: 10px !important;
}
.v61-pack.v78-pack img {
  width: min(142px, 76%) !important;
  max-height: 206px !important;
  margin: 0 auto 4px !important;
}
.v61-pack.v78-pack .v61-pack-label {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 3px !important;
  width: min(190px, 100%) !important;
  min-width: 0 !important;
  padding: 9px 12px !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 42%),
    linear-gradient(135deg, #ff65b6, #ff3f9f 54%, #e93691) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.38),
    inset 0 1px 0 rgba(255,255,255,.38),
    0 9px 18px rgba(255,65,158,.24) !important;
  text-shadow: 0 1px 0 rgba(137,0,82,.25) !important;
}
.v61-pack.v78-pack .v61-pack-label small {
  display: block !important;
  margin: 0 !important;
  color: #fff !important;
  line-height: 1.05 !important;
  letter-spacing: .065em !important;
  text-transform: uppercase !important;
}
.v61-pack.v78-pack .v61-pack-label .v79-pack-title-line {
  font-size: .72rem !important;
  font-weight: 950 !important;
  white-space: normal !important;
}
.v61-pack.v78-pack .v61-pack-label small:not(.v79-pack-title-line) {
  justify-self: center !important;
  width: fit-content !important;
  margin-top: 3px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.22) !important;
  font-size: .62rem !important;
  letter-spacing: .085em !important;
}
.v61-pack.v78-pack:hover .v61-pack-label,
.v61-pack.v78-pack:focus-visible .v61-pack-label {
  transform: translateY(-2px) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.52),
    inset 0 1px 0 rgba(255,255,255,.42),
    0 12px 24px rgba(255,65,158,.32) !important;
}
@media (max-width: 720px) {
  .v61-pack.v78-pack { width: min(100%, 188px) !important; min-height: 278px !important; }
  .v61-pack.v78-pack img { width: min(128px, 74%) !important; max-height: 184px !important; }
  .v61-pack.v78-pack .v61-pack-label { width: min(164px, 100%) !important; padding: 8px 10px !important; }
  .v61-pack.v78-pack .v61-pack-label .v79-pack-title-line { font-size: .65rem !important; }
}


/* Right-side preview: remove the white card plate behind the artwork. */
.v62-showcase .v62-preview-card,
.v62-showcase .v62-preview-card .preview-inner,
.v62-showcase .v62-preview-card .face,
.detail .preview-card,
.detail .preview-card .preview-inner,
.detail .preview-card .face {
  background: transparent !important;
  box-shadow: none !important;
}
.v62-showcase .v62-preview-card img,
.detail .preview-card img {
  background: transparent !important;
  filter: drop-shadow(0 16px 24px rgba(8,39,125,.20));
}

/* One-surface spin flip: keeps the back artwork readable, never mirrored. */
.preview-card.simple-flip,
.v62-preview-card.simple-flip,
.full-card-wrap.simple-flip {
  perspective: 1400px !important;
  transform-style: preserve-3d !important;
}
.preview-card.simple-flip .preview-inner,
.v62-preview-card.simple-flip .preview-inner,
.full-card-wrap.simple-flip .full-inner {
  transform: none !important;
  transition: none !important;
  transform-style: preserve-3d !important;
}
.preview-card.simple-flip .face.back,
.v62-preview-card.simple-flip .face.back,
.full-card-wrap.simple-flip .face.back {
  display: none !important;
}
.preview-card.simple-flip .face.front,
.v62-preview-card.simple-flip .face.front,
.full-card-wrap.simple-flip .face.front {
  opacity: 1 !important;
  transform: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}
.preview-card.simple-flip .face.front img,
.v62-preview-card.simple-flip .face.front img,
.full-card-wrap.simple-flip .face.front img {
  content: normal !important;
  transform: none !important;
  scale: 1 !important;
  object-fit: contain !important;
}
.preview-card.simple-flip.flipped .preview-inner,
.preview-card.simple-flip.show-back .preview-inner,
.v62-preview-card.simple-flip.flipped .preview-inner,
.v62-preview-card.simple-flip.show-back .preview-inner,
.full-card-wrap.simple-flip.flipped .full-inner,
.full-card-wrap.simple-flip.show-back .full-inner {
  transform: none !important;
}
.preview-card.simple-flip.flip-turning .preview-inner,
.v62-preview-card.simple-flip.flip-turning .preview-inner,
.full-card-wrap.simple-flip.flip-turning .full-inner {
  animation: v796ReadableSpin .64s cubic-bezier(.18,.82,.2,1) both !important;
}
@keyframes v796ReadableSpin {
  0% { transform: rotateY(0deg) scale(1); filter: brightness(1) drop-shadow(0 12px 18px rgba(8,39,125,.16)); }
  42% { transform: rotateY(88deg) scale(1.045); filter: brightness(1.26) drop-shadow(0 0 22px rgba(255,79,167,.34)); }
  58% { transform: rotateY(-88deg) scale(1.045); filter: brightness(1.22) drop-shadow(0 0 24px rgba(114,207,255,.30)); }
  100% { transform: rotateY(0deg) scale(1); filter: brightness(1) drop-shadow(0 15px 24px rgba(8,39,125,.20)); }
}


@keyframes v796HoloSweep {
  0%,18% { transform: translateX(-60%) rotate(0deg); opacity: 0; }
  36% { opacity: .78; }
  58% { opacity: .88; }
  82%,100% { transform: translateX(60%) rotate(0deg); opacity: 0; }
}

/* Full view mouse-reactive 3D tilt. */
.full-card-wrap#fullCard3d {
  --tiltX: 0deg;
  --tiltY: 0deg;
  --shineX: 50%;
  --shineY: 50%;
  transform: rotateX(var(--tiltX)) rotateY(var(--tiltY)) translateZ(0) !important;
  transform-style: preserve-3d !important;
  transition: transform .22s ease, filter .22s ease !important;
  will-change: transform;
}
.full-card-wrap#fullCard3d.tilting {
  filter: drop-shadow(calc(var(--tiltY) * -1) 22px 32px rgba(8,39,125,.26));
}
.full-card-wrap#fullCard3d.tilting .face.front::marker { content: ""; }


/* Booster splash overhaul: cleaner stage, stronger pack card, less clunky button. */
.v61-series-stage,
#seriesLanding {
  overflow: visible !important;
}
.v61-splash-inner.v78-splash-inner {
  min-height: clamp(520px, 68vh, 690px) !important;
  padding: clamp(34px, 5vw, 64px) clamp(18px, 4vw, 48px) !important;
  gap: clamp(26px, 4vw, 44px) !important;
}
.v61-splash-title {
  padding: 18px clamp(18px, 4vw, 42px) !important;
  border-radius: 28px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.25)) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 18px 50px rgba(56,74,165,.14), inset 0 1px 0 rgba(255,255,255,.65) !important;
}
.v61-pack-row.v78-pack-grid {
  align-items: stretch !important;
  gap: clamp(22px, 4vw, 58px) !important;
}
.v61-pack.v78-pack {
  width: clamp(220px, 23vw, 292px) !important;
  min-height: clamp(330px, 38vw, 414px) !important;
  padding: 18px 18px 20px !important;
  gap: 14px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.88), rgba(255,255,255,.35) 36%, transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,226,244,.28)) !important;
  border: 1px solid rgba(255,255,255,.76) !important;
  box-shadow: 0 22px 55px rgba(64,63,166,.18), inset 0 1px 0 rgba(255,255,255,.62) !important;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
.v61-pack.v78-pack:before {
  width: 88% !important;
  background: radial-gradient(circle, rgba(255,247,199,.62), rgba(255,102,190,.26) 42%, rgba(114,207,255,.20) 58%, transparent 76%) !important;
}
.v61-pack.v78-pack:hover,
.v61-pack.v78-pack:focus-visible {
  transform: translateY(-8px) scale(1.025) !important;
  box-shadow: 0 30px 68px rgba(64,63,166,.24), 0 0 34px rgba(255,83,177,.22), inset 0 1px 0 rgba(255,255,255,.72) !important;
}
.v61-pack.v78-pack img {
  width: clamp(158px, 17vw, 224px) !important;
  max-height: clamp(230px, 30vw, 310px) !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 18px 20px rgba(47,50,140,.24)) !important;
}
.v61-pack.v78-pack .v61-pack-label {
  width: min(230px, 100%) !important;
  padding: 10px 14px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 40%),
    linear-gradient(135deg, #ff7fc3 0%, #ff4fa7 54%, #df358f 100%) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.32), 0 10px 22px rgba(255,65,158,.26), inset 0 1px 0 rgba(255,255,255,.42) !important;
  text-shadow: 0 1px 0 rgba(137,0,82,.28) !important;
}
.v61-pack.v78-pack .v61-pack-label .v79-pack-title-line {
  font-size: clamp(.67rem, .95vw, .82rem) !important;
  letter-spacing: .055em !important;
  line-height: 1.1 !important;
  white-space: normal !important;
}
.v61-pack.v78-pack .v61-pack-label small:not(.v79-pack-title-line) {
  margin-top: 5px !important;
  padding: 4px 10px !important;
  font-size: clamp(.58rem, .75vw, .68rem) !important;
  background: rgba(255,255,255,.24) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}
@media (max-width: 720px) {
  .v61-pack.v78-pack { width: min(88vw, 244px) !important; min-height: 338px !important; }
  .v61-pack.v78-pack img { width: min(180px, 76%) !important; max-height: 252px !important; }
}
.full-card-wrap#fullCard3d.tilting {
  filter: drop-shadow(0 26px 34px rgba(8,39,125,.28)) !important;
}


/* Remove the normal binder hero while the user is on the booster selection splash. */
body[data-page="binder"].series-select .series-hero,
body[data-page="binder"].series-select .v61-hero {
  display: none !important;
}

/* Booster splash: more polished, magical-girl stage inspired by the approved mockup. */
body[data-page="binder"].series-select #seriesLanding {
  grid-column: 1 / -1 !important;
  min-height: clamp(620px, calc(100vh - 120px), 860px) !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 98%, rgba(255,255,255,.88), rgba(255,201,235,.44) 18%, transparent 44%),
    radial-gradient(circle at 20% 25%, rgba(166,205,255,.55), transparent 34%),
    radial-gradient(circle at 78% 18%, rgba(255,182,229,.50), transparent 30%),
    linear-gradient(135deg, #8fb9ff 0%, #d7b8ff 34%, #ffc4e5 66%, #bce9ff 100%) !important;
  box-shadow: 0 26px 80px rgba(77,55,178,.24), inset 0 0 0 2px rgba(255,255,255,.48), inset 0 0 38px rgba(255,105,205,.26) !important;
}
body[data-page="binder"].series-select #seriesLanding::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1.8px, transparent 2.8px),
    radial-gradient(circle, rgba(255,113,201,.65) 0 1.5px, transparent 2.4px),
    radial-gradient(circle, rgba(255,226,105,.80) 0 1.4px, transparent 2.4px),
    linear-gradient(112deg, transparent 0 18%, rgba(255,255,255,.24) 22%, transparent 33% 65%, rgba(255,255,255,.20) 72%, transparent 84%);
  background-size: 116px 116px, 74px 74px, 148px 148px, 100% 100% !important;
  opacity: .9 !important;
  animation: v797SplashTwinkle 13s linear infinite !important;
}
body[data-page="binder"].series-select #seriesLanding::after {
  content: "" !important;
  position: absolute !important;
  inset: 12px !important;
  border-radius: 28px !important;
  pointer-events: none !important;
  border: 2px solid rgba(255,169,224,.70) !important;
  box-shadow: inset 0 0 22px rgba(255,255,255,.56), 0 0 24px rgba(255,86,189,.34) !important;
}
@keyframes v797SplashTwinkle {
  to { background-position: 0 -116px, 74px -74px, -148px -148px, 0 0; }
}
.v61-splash-inner.v78-splash-inner {
  min-height: clamp(620px, calc(100vh - 120px), 860px) !important;
  gap: clamp(34px, 5vw, 64px) !important;
  padding: clamp(44px, 6vw, 72px) clamp(16px, 5vw, 70px) !important;
}
.v61-splash-title {
  position: relative !important;
  width: min(920px, 86vw) !important;
  padding: clamp(22px, 3.2vw, 38px) clamp(18px, 4vw, 54px) !important;
  border-radius: 34px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,231,248,.28)) !important;
  border: 2px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 0 0 4px rgba(255,135,211,.22), 0 18px 48px rgba(255,72,177,.24), inset 0 1px 0 rgba(255,255,255,.86) !important;
  backdrop-filter: blur(8px) saturate(1.25) !important;
}
.v61-splash-title::before,
.v61-splash-title::after {
  content: "☆" !important;
  position: absolute !important;
  color: #fff2a2 !important;
  text-shadow: 0 0 10px #fff, 0 0 18px #ff65c5 !important;
  font-size: clamp(1.6rem, 3vw, 3rem) !important;
  animation: v797TitleStar 2.4s ease-in-out infinite !important;
}
.v61-splash-title::before { left: clamp(16px, 4vw, 46px) !important; top: 50% !important; transform: translateY(-50%) rotate(-14deg) !important; }
.v61-splash-title::after { right: clamp(16px, 4vw, 46px) !important; top: 50% !important; transform: translateY(-50%) rotate(14deg) !important; animation-delay: .6s !important; }
@keyframes v797TitleStar { 50% { filter: brightness(1.35); opacity: .72; } }
.v61-splash-title h2 {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(1.65rem, 4vw, 3.35rem) !important;
  line-height: 1.05 !important;
  font-style: normal !important;
  font-weight: 950 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
  text-shadow: 0 3px 0 #f067ba, 0 0 12px rgba(255,255,255,.95), 0 0 28px rgba(255,67,177,.58) !important;
}
.v61-pack-row.v78-pack-grid {
  position: relative !important;
  z-index: 2 !important;
  gap: clamp(34px, 6vw, 90px) !important;
}
.v61-pack.v78-pack {
  width: clamp(245px, 24vw, 330px) !important;
  min-height: clamp(355px, 39vw, 445px) !important;
  border-radius: 34px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,236,249,.22)) !important;
  border: 2px solid rgba(255,255,255,.62) !important;
  box-shadow: 0 0 0 3px rgba(255,155,220,.20), 0 24px 60px rgba(51,48,154,.24), inset 0 0 38px rgba(255,255,255,.22) !important;
}
.v61-pack.v78-pack img {
  width: clamp(172px, 18vw, 246px) !important;
  max-height: clamp(255px, 30vw, 330px) !important;
}
.v61-pack.v78-pack .v61-pack-label {
  width: min(245px, 100%) !important;
  padding: 11px 16px 12px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #ff91cc 0%, #f04da6 55%, #ce348d 100%) !important;
  border: 2px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 0 0 3px rgba(255,231,157,.36), 0 14px 28px rgba(210,35,132,.34), inset 0 1px 0 rgba(255,255,255,.46) !important;
}
.v61-pack.v78-pack .v61-pack-label .v79-pack-title-line {
  font-size: clamp(.72rem, .95vw, .88rem) !important;
  line-height: 1.15 !important;
}
.v61-pack.v78-pack .v61-pack-label small:not(.v79-pack-title-line) {
  display: inline-flex !important;
  justify-content: center !important;
  justify-self: center !important;
  margin-top: 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.24) !important;
}


@keyframes v797HoloSweepStars {
  0%,12% { background-position: 0 0, 0 0, 0 0, 0 0, -190% 0; opacity: .38; }
  42% { opacity: .74; }
  62% { background-position: 30px -24px, -34px 28px, 26px 44px, -44px -32px, 145% 0; opacity: .70; }
  100% { background-position: 68px -68px, -92px 92px, 76px -76px, -108px 108px, 190% 0; opacity: .40; }
}
@keyframes v797StarGlitter {
  0% { transform: rotate(-18deg) translateX(-34%) translateY(0); opacity: .18; }
  25% { opacity: .75; }
  50% { transform: rotate(-18deg) translateX(16%) translateY(-24%); opacity: .58; }
  75% { opacity: .88; }
  100% { transform: rotate(-18deg) translateX(58%) translateY(-45%); opacity: .16; }
}


/* Final readable flip guard: one visible image surface, no mirrored back face, simple spin swap. */
.preview-card.simple-flip .face.back,
.v62-preview-card.simple-flip .face.back,
.full-card-wrap.simple-flip .face.back {
  display: none !important;
  transform: none !important;
}
.preview-card.simple-flip .preview-inner,
.v62-preview-card.simple-flip .preview-inner,
.full-card-wrap.simple-flip .full-inner,
.preview-card.simple-flip.show-back .preview-inner,
.v62-preview-card.simple-flip.show-back .preview-inner,
.full-card-wrap.simple-flip.show-back .full-inner,
.preview-card.simple-flip.flipped .preview-inner,
.v62-preview-card.simple-flip.flipped .preview-inner,
.full-card-wrap.simple-flip.flipped .full-inner {
  transform: none !important;
}
.preview-card.simple-flip .face.front,
.v62-preview-card.simple-flip .face.front,
.full-card-wrap.simple-flip .face.front,
.preview-card.simple-flip .face.front img,
.v62-preview-card.simple-flip .face.front img,
.full-card-wrap.simple-flip .face.front img,
.preview-card.simple-flip.showing-card-back .face.front,
.v62-preview-card.simple-flip.showing-card-back .face.front,
.full-card-wrap.simple-flip.showing-card-back .face.front,
.preview-card.simple-flip.showing-card-back .face.front img,
.v62-preview-card.simple-flip.showing-card-back .face.front img,
.full-card-wrap.simple-flip.showing-card-back .face.front img {
  transform: none !important;
  scale: 1 !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}
.preview-card.simple-flip.flip-turning .preview-inner,
.v62-preview-card.simple-flip.flip-turning .preview-inner,
.full-card-wrap.simple-flip.flip-turning .full-inner {
  animation: v797CleanReadableSpin .58s cubic-bezier(.2,.82,.18,1) both !important;
}
@keyframes v797CleanReadableSpin {
  0% { transform: rotateY(0deg) scale(1) !important; filter: brightness(1); }
  47% { transform: rotateY(88deg) scale(1.035) !important; filter: brightness(1.22) drop-shadow(0 0 18px rgba(255,88,185,.34)); }
  53% { transform: rotateY(-88deg) scale(1.035) !important; filter: brightness(1.22) drop-shadow(0 0 18px rgba(125,220,255,.30)); }
  100% { transform: rotateY(0deg) scale(1) !important; filter: brightness(1); }
}


@keyframes v798RainbowFilm {
  0%, 100% { filter: hue-rotate(0deg) saturate(1.05); }
  50% { filter: hue-rotate(18deg) saturate(1.18); }
}


@keyframes v798LegendaryShootingStar {
  0%, 62%, 100% { background-position: -160% 0, center, center, center, center, center, 0 0; }
  74% { background-position: 140% 0, center, center, center, center, center, 0 0; }
}

@keyframes v798StarlightEdgePulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,140,220,0)); }
  50% { filter: drop-shadow(0 0 7px rgba(255,140,220,.20)); }
}

@keyframes v798LegendaryEdgePulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255,220,120,.15)); }
  50% { filter: drop-shadow(0 0 10px rgba(255,160,224,.26)); }
}


/* Rainbow film + embedded star glitter. */


/* One premium sweep only. No particle DOM. */


/* Broad bright reflection with a pink/gold inner core. */