:root{
 --bg:#070708;--panel:#101014;--panel2:#16161b;--text:#f7f3ea;--muted:#8e8a82;
 --gold:#d8a73b;--gold2:#ffde75;--purple:#9b43ff;--blue:#3898ff;--pink:#ff55d8;
 --line:#26242b;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -10%,rgba(180,128,31,.12),transparent 30%),linear-gradient(180deg,#090909,#050506);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}
body{display:flex;justify-content:center}
button,input{font:inherit}
button{cursor:pointer}
.app-shell{width:min(100%,470px);min-height:100dvh;padding:0 17px 88px}
.topbar{height:70px;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(7,7,8,.98) 68%,transparent);backdrop-filter:blur(10px)}
.brand{border:0;background:none;color:white;font-weight:900;letter-spacing:.14em;display:flex;align-items:center;gap:8px}
.vmark{display:grid;place-items:center;width:28px;height:28px;border:2px solid var(--gold);color:var(--gold2);transform:rotate(45deg);font-size:13px}
.vmark::first-letter{transform:rotate(-45deg)}
.coin-chip{background:#18130b;border:1px solid #5c4315;border-radius:999px;padding:9px 13px;font-weight:900;color:#ffe89a}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,470px);display:grid;grid-template-columns:repeat(5,1fr);padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(7,7,8,.96);border-top:1px solid #222;backdrop-filter:blur(18px);z-index:30}
.bottom-nav button{border:0;background:none;color:#726f75;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0}
.bottom-nav button.active{color:#e3b54d}.bottom-nav span{font-size:20px}.bottom-nav small{font-size:10px;font-weight:800}
.stack{display:grid;gap:14px}.card{background:linear-gradient(160deg,#15151a,#0d0d10);border:1px solid #28252a;border-radius:23px;padding:18px}
.hero{padding:24px;background:radial-gradient(circle at 50% 10%,rgba(222,166,52,.12),transparent 45%),linear-gradient(145deg,#15130e,#0b0a09);border-color:#55401a}
.eyebrow{font-size:10px;letter-spacing:.18em;font-weight:950;color:#c19a48;text-transform:uppercase}
.h1{font-size:36px;line-height:1;margin:8px 0;letter-spacing:-1.5px}.h2{font-size:26px;margin:4px 0 10px}.p{color:#98938b;line-height:1.5}
.btn{border:0;border-radius:15px;padding:14px 16px;font-weight:950;width:100%}
.btn-gold{background:linear-gradient(180deg,#ffe487,#d19a2e);color:#171006;box-shadow:0 10px 26px rgba(214,161,45,.18)}
.btn-dark{background:#17171c;border:1px solid #363239;color:#fff}.btn-outline{background:transparent;border:1px solid #6a5225;color:#e7bd62}
.pack{height:250px;width:170px;margin:10px auto 18px;border-radius:14px;background:linear-gradient(145deg,#1c1811,#090807);border:2px solid #876524;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 32px rgba(214,160,46,.12);display:grid;place-items:center;overflow:hidden}
.pack:before,.pack:after{content:"";position:absolute;width:190%;height:2px;background:#d5a645;transform:rotate(-32deg);box-shadow:0 0 14px #bd8a2a}
.pack:before{top:43%}.pack:after{top:55%}
.pack-logo{font-size:30px;font-weight:1000;letter-spacing:.15em}.pack-sub{font-size:10px;color:#d1a94e;letter-spacing:.15em}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.stat{background:#0e0e12;border:1px solid #232127;border-radius:16px;padding:12px;text-align:center}.stat b{display:block;font-size:20px}.stat small{color:#79757c;font-size:9px}
.rarity-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.rarity-chip{border-radius:8px;padding:7px 2px;text-align:center;font-size:8px;font-weight:900;border:1px solid #333}
.collection-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.progress{height:8px;background:#1a191d;border-radius:99px;overflow:hidden}.progress>i{display:block;height:100%;background:linear-gradient(90deg,#c78f28,#ffe070)}
.filters{display:flex;gap:7px;overflow:auto;padding-bottom:4px}.filter{white-space:nowrap;border-radius:999px;border:1px solid #302e35;background:#121216;color:#aaa5ad;padding:8px 11px;font-size:10px;font-weight:800}.filter.active{border-color:#8b6825;color:#ffe282;background:#1e170b}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.card-tile{aspect-ratio:.72;border-radius:12px;padding:7px;display:flex;flex-direction:column;justify-content:space-between;background:#111116;border:1px solid #2c2930;position:relative;overflow:hidden}
.card-tile.locked{filter:grayscale(1);opacity:.28}.card-tile .num{font-size:9px;color:#8b8790}.card-art{font-size:36px;text-align:center}.card-name{font-weight:900;font-size:9px;line-height:1.05}.card-rarity{font-size:8px;font-weight:900;margin-top:3px}
.Common{border-color:#777}.Rare{border-color:#2879cf;box-shadow:inset 0 0 14px rgba(40,121,207,.1)}.Gold{border-color:#d2a02d;box-shadow:inset 0 0 18px rgba(210,160,45,.14)}.Diamond{border-color:#9d55ff;box-shadow:0 0 14px rgba(157,85,255,.13)}.Mythic{border-color:#ff4fce;box-shadow:0 0 16px rgba(255,79,206,.13)}.Legend{border-color:#ffd86a;box-shadow:0 0 22px rgba(255,216,106,.22),inset 0 0 20px rgba(255,197,61,.12)}
.Rare .card-rarity{color:#5ab2ff}.Gold .card-rarity{color:#ffd45e}.Diamond .card-rarity{color:#b984ff}.Mythic .card-rarity{color:#ff75db}.Legend .card-rarity{color:#ffe47f}
.reveal-wrap{min-height:74dvh;display:flex;flex-direction:column;justify-content:center}
.reveal-stage{display:flex;justify-content:center;align-items:center;min-height:420px;perspective:900px}
.reveal-card{width:245px;aspect-ratio:.72;position:relative;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.8,.2,1)}
.reveal-card.flipped{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:22px}.back{background:linear-gradient(145deg,#19150e,#070707);border:2px solid #7a5920;display:grid;place-items:center;box-shadow:0 18px 50px rgba(0,0,0,.5)}.front{transform:rotateY(180deg);padding:14px;background:#111;border:3px solid #777;display:flex;flex-direction:column;justify-content:space-between}.front .art{font-size:88px;text-align:center}.front .big-name{font-size:20px;font-weight:1000}.front .rarelabel{font-size:12px;font-weight:950}
.reveal-card.Rare .front{border-color:#319cff}.reveal-card.Gold .front{border-color:#e3ad34}.reveal-card.Diamond .front{border-color:#aa67ff;box-shadow:0 0 35px rgba(160,86,255,.25)}.reveal-card.Mythic .front{border-color:#ff65df;box-shadow:0 0 45px rgba(255,75,219,.28)}.reveal-card.Legend .front{border-color:#ffe16f;box-shadow:0 0 60px rgba(255,213,76,.38)}
.reveal-nav{display:flex;gap:9px}.reveal-nav .btn{flex:1}.dupe{font-size:10px;color:#e1b95f;font-weight:900}
.list{display:grid;gap:9px}.row{display:grid;grid-template-columns:42px 1fr auto;gap:11px;align-items:center;background:#101014;border:1px solid #242228;border-radius:15px;padding:11px}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#211a11;color:#f3c65b;font-weight:950}
.toast{position:fixed;top:84px;left:50%;transform:translateX(-50%);z-index:100;background:#18140c;border:1px solid #6a5120;color:#ffe397;padding:11px 14px;border-radius:13px;font-weight:850;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.hidden{display:none!important}.center{text-align:center}.small{font-size:10px;color:#777}.gold{color:#e6b64d}

.vault-input{width:100%;background:#101014;color:#fff;border:1px solid #4b3b1c;border-radius:14px;padding:14px 15px;outline:none}.vault-input:focus{border-color:#d8a73b;box-shadow:0 0 0 3px rgba(216,167,59,.1)}

/* ===== VAULT premium cards ===== */
.premium-tile{padding:0!important;aspect-ratio:.69!important;background:#09090c!important;border-radius:14px!important;overflow:hidden!important}
.premium-tile.locked{filter:none!important;opacity:1!important}
.premium-card-inner{height:100%;position:relative;display:flex;flex-direction:column;padding:7px;background:linear-gradient(160deg,#17171c,#09090c);border:1px solid #45434a;border-radius:13px;overflow:hidden}
.premium-card-inner.Rare{border-color:#278ce9;box-shadow:inset 0 0 18px rgba(33,136,240,.18)}
.premium-card-inner.Gold{border-color:#e4ae35;box-shadow:inset 0 0 20px rgba(228,174,53,.18)}
.premium-card-inner.Diamond{border-color:#a45eff;box-shadow:0 0 18px rgba(164,94,255,.17),inset 0 0 22px rgba(164,94,255,.15)}
.premium-card-inner.Mythic{border-color:#ff5fd8;box-shadow:0 0 21px rgba(255,95,216,.2),inset 0 0 25px rgba(255,95,216,.15)}
.premium-card-inner.Legend{border-color:#ffe16e;box-shadow:0 0 27px rgba(255,218,76,.28),inset 0 0 28px rgba(255,195,61,.16)}
.premium-topline{display:flex;justify-content:space-between;gap:5px;align-items:center;font-size:7px;font-weight:1000;letter-spacing:.08em;margin-bottom:5px;z-index:2}
.premium-no{color:#d8d6dd}.premium-rarity{color:#8d8994}
.Rare .premium-rarity{color:#50adff}.Gold .premium-rarity{color:#ffd662}.Diamond .premium-rarity{color:#c08cff}.Mythic .premium-rarity{color:#ff83e5}.Legend .premium-rarity{color:#ffe878}
.art-scene{position:relative;flex:1;min-height:74px;border-radius:9px;overflow:hidden;display:grid;place-items:center;background:#141414;isolation:isolate}
.art-scene.large{min-height:245px}
.art-scene:before,.art-scene:after{content:"";position:absolute;inset:0;z-index:-2}
.habitat-forest:before{background:radial-gradient(circle at 50% 20%,#5e7748 0,#253226 35%,#09100b 78%)}
.habitat-mountain:before{background:linear-gradient(180deg,#8090a5 0,#414b58 30%,#1b1c23 65%,#0d0e12)}
.habitat-ocean:before{background:radial-gradient(circle at 50% 15%,#2e9dcc 0,#0b4966 36%,#071522 80%)}
.habitat-savanna:before{background:linear-gradient(180deg,#c98f42 0,#71552e 40%,#251b12 75%,#0e0c0a)}
.habitat-arctic:before{background:linear-gradient(180deg,#b9d5e6 0,#66889d 37%,#26333b 65%,#0e1215)}
.habitat-night:before{background:radial-gradient(circle at 55% 22%,#57306e 0,#24162f 38%,#09070d 80%)}
.scene-glow{position:absolute;width:80%;height:65%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 65%);filter:blur(6px)}
.scene-mist{position:absolute;inset:auto -20% 0;height:35%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));filter:blur(4px)}
.animal-portrait{position:relative;z-index:2;font-size:46px;transform:scale(1.3);filter:drop-shadow(0 14px 12px rgba(0,0,0,.45)) saturate(1.15)}
.art-scene.large .animal-portrait{font-size:118px;transform:scale(1.1)}
.foil-sheen{position:absolute;inset:-120% -50%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.16) 48%,transparent 54%);transform:rotate(9deg);animation:foilSweep 5.5s linear infinite}
.Diamond .foil-sheen,.Mythic .foil-sheen,.Legend .foil-sheen{background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.28) 48%,rgba(173,94,255,.15) 51%,transparent 57%);animation-duration:3.3s}
@keyframes foilSweep{from{transform:translateX(-35%) rotate(9deg)}to{transform:translateX(40%) rotate(9deg)}}
.premium-info{padding-top:7px;position:relative}.premium-name{font-size:10px;line-height:1.04;font-weight:1000}.premium-set{font-size:6px;color:#77727e;letter-spacing:.09em;margin-top:3px}.legend-copy{font-size:7px;color:#ffe067;font-weight:1000;margin-top:4px}.owned-pill{position:absolute;right:0;bottom:0;background:#1b1720;border:1px solid #44404b;border-radius:99px;padding:2px 6px;font-size:7px;font-weight:950}
.locked-card{height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:8px;border-radius:12px;background:radial-gradient(circle at 50% 35%,#222027,#0c0b0f 70%);border:1px solid #2a282e}.locked-no,.locked-rarity{font-size:7px;color:#55515c}.locked-mark{text-align:center;font-size:34px;color:#29262e}
.premium-reveal-front{padding:0!important;border:0!important;background:transparent!important}
.premium-reveal-front .premium-card-inner{border-radius:22px;padding:11px}
.premium-reveal-front .premium-name{font-size:20px}.premium-reveal-front .premium-set,.premium-reveal-front .legend-copy{font-size:10px}
.detail-card-wrap{width:min(290px,88%);margin:8px auto 18px;aspect-ratio:.69}.detail-card-wrap .premium-name{font-size:20px}.detail-card-wrap .premium-set,.detail-card-wrap .legend-copy{font-size:10px}

/* ===== Epic pack opening ===== */
.epic-open-screen{min-height:78dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}
.epic-bg{position:absolute;inset:-25%;background:radial-gradient(circle at 50% 50%,rgba(218,166,58,.16),transparent 35%),radial-gradient(circle at 50% 45%,rgba(129,55,207,.1),transparent 55%);animation:bgPulse 2.8s ease-in-out infinite}
@keyframes bgPulse{50%{transform:scale(1.08);filter:brightness(1.2)}}
.epic-title{position:absolute;top:18px;text-align:center;z-index:5}
.epic-pack-wrap{width:300px;height:430px;display:grid;place-items:center;position:relative}
.epic-rays{position:absolute;width:330px;height:330px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(232,183,72,.1) 0 3deg,transparent 3deg 14deg);animation:spinRays 11s linear infinite;opacity:.55}
@keyframes spinRays{to{transform:rotate(360deg)}}
.epic-pack{width:190px;height:285px;border-radius:18px;background:linear-gradient(145deg,#2a2114,#0b0907 70%);border:2px solid #9e7326;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 45px rgba(226,175,62,.16);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:.6s cubic-bezier(.2,.8,.2,1)}
.epic-pack:before,.epic-pack:after{content:"";position:absolute;width:250%;height:2px;background:#dcae47;transform:rotate(-30deg);box-shadow:0 0 16px #efbe55}
.epic-pack:before{top:43%}.epic-pack:after{top:56%}
.epic-v{font-size:62px;font-weight:1000;color:#e6bb59;text-shadow:0 0 22px rgba(231,186,86,.25)}.epic-pack-name{font-size:21px;font-weight:1000;letter-spacing:.18em}.epic-pack-sub{font-size:9px;color:#b69042;letter-spacing:.16em;margin-top:5px}
.pack-tear{position:absolute;top:0;left:0;right:0;height:28px;background:repeating-linear-gradient(135deg,#312617 0 8px,#1b160f 8px 16px);border-bottom:1px solid #6d5121}
.epic-pack.charging{animation:packCharge .1s linear infinite alternate;box-shadow:0 0 80px rgba(255,210,94,.42),0 0 140px rgba(145,60,255,.2)}
@keyframes packCharge{from{transform:translate(-2px,1px) rotate(-.6deg) scale(1.02)}to{transform:translate(2px,-1px) rotate(.6deg) scale(1.035)}}
.epic-pack.burst{transform:scale(1.16) rotate(2deg);filter:brightness(2.3);opacity:0}
.particles{position:absolute;inset:50% auto auto 50%;width:1px;height:1px}.particles i{position:absolute;width:7px;height:7px;border-radius:50%;background:#ffd66b;box-shadow:0 0 10px #ffd66b;animation:particleFly var(--d) ease-out forwards}
@keyframes particleFly{to{transform:translate(var(--x),var(--y)) scale(.1);opacity:0}}
.epic-hint{font-size:11px;font-weight:1000;letter-spacing:.16em;color:#d0a84e;z-index:5}
.legend-flash:after{content:"";position:fixed;inset:0;background:radial-gradient(circle,#fff5bf,rgba(255,210,78,.45),transparent 70%);pointer-events:none;z-index:999;animation:legendFlash .8s ease-out forwards}
@keyframes legendFlash{from{opacity:1}to{opacity:0}}

.art-scene.has-real-art{background:#08080b}
.real-card-art{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.08) contrast(1.05) brightness(.94);
  transform:scale(1.02);
}
.premium-card-inner.Gold .real-card-art{filter:saturate(1.12) contrast(1.06) brightness(.98)}
.premium-card-inner.Diamond .real-card-art{filter:saturate(1.17) contrast(1.08) brightness(.98)}
.premium-card-inner.Mythic .real-card-art{filter:saturate(1.22) contrast(1.08) brightness(1.02)}
.premium-card-inner.Legend .real-card-art{filter:saturate(1.12) contrast(1.12) brightness(1.04)}
.art-scene.has-real-art:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.02) 45%,rgba(0,0,0,.65) 100%);
  pointer-events:none;
}