*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:radial-gradient(circle at 50% -10%,#24306b,#0b0f1e 60%);color:#eef;font:15px -apple-system,system-ui,sans-serif;min-height:100vh;padding-bottom:80px}
#beta{background:#ffcf3a;color:#1a1400;font-size:11px;font-weight:700;text-align:center;padding:5px 8px;padding-top:calc(5px + env(safe-area-inset-top))}
header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px}
.logo{font-weight:900;letter-spacing:2px;font-size:20px}.logo b{color:#4ff0d0}
.coins{background:#162048;border:1px solid #3a4a9a;border-radius:20px;padding:5px 12px;font-weight:800}.coins:before{content:"◎ ";color:#ffcf3a}
main{padding:0 14px}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:#0e1430ee;border-top:1px solid #2a3570;padding-bottom:env(safe-area-inset-bottom)}
nav button{flex:1;background:none;border:0;color:#99a;padding:14px 0;font-weight:700;font-size:14px}nav button.on{color:#4ff0d0}
.tabs{display:flex;gap:8px;margin:6px 0 12px}.tabs button{flex:1;padding:10px;border-radius:12px;border:1px solid #3a4a9a;background:#141c40;color:#ccd;font-weight:800}
.tabs button.on{background:linear-gradient(135deg,#4ff0d0,#6a7bff);color:#081018;border:0}
.pack{border-radius:18px;padding:14px;margin-bottom:12px;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 6px 20px #0008;position:relative;overflow:hidden}
.pack h3{margin:0 0 2px;font-size:19px}.pack .sub{opacity:.85;font-size:12px}
.pack .row{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.pack button,.btn{background:#fff;color:#0b0f1e;border:0;border-radius:12px;padding:10px 18px;font-weight:900;font-size:15px}
.btn.alt{background:#1d2756;color:#fff;border:1px solid #4a5ab0}.btn:disabled,.pack button:disabled{opacity:.4}
.odds{display:flex;gap:3px;margin-top:8px;font-size:10px}.odds span{flex:1;text-align:center;background:#0004;border-radius:6px;padding:3px 0}
.daily{display:flex;justify-content:space-between;align-items:center;background:#141c40;border:1px dashed #4a5ab0;border-radius:14px;padding:10px 14px;margin-bottom:12px;font-size:13px}
.t-Bulk{--g:#6f7890}.t-Common{--g:#9aa4b8}.t-Uncommon{--g:#4fd06a}.t-Rare{--g:#3fa0ff}.t-Epic{--g:#c04fff}.t-Legendary{--g:#ffcf3a}
.tier{color:var(--g);font-weight:800}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mini{background:#141c40;border-radius:10px;padding:5px;font-size:10px;border:1px solid var(--g);text-align:center}.mini img{width:100%;border-radius:6px;aspect-ratio:5/7;object-fit:cover;background:#222}
.mini .v{font-weight:800;font-size:12px}
.list .it{display:flex;gap:10px;align-items:center;background:#141c40;border-radius:12px;padding:8px;margin-bottom:6px;border-left:4px solid var(--g);font-size:13px}
.list img{width:40px;height:56px;object-fit:cover;border-radius:4px}.list .grow{flex:1}.small{font-size:11px;opacity:.7}
table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:14px}td,th{padding:5px;border-bottom:1px solid #2a3570;text-align:right}td:first-child,th:first-child{text-align:left}
.hidden{display:none!important}
#rip{position:fixed;inset:0;background:#05070fF2;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.packart{width:220px;height:320px;border-radius:16px;position:relative;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:26px;letter-spacing:2px;box-shadow:0 0 40px #6a7bff88;animation:wob 1.2s ease-in-out infinite}
.packart .top{position:absolute;top:0;left:0;right:0;height:50px;background:inherit;border-radius:16px 16px 0 0;border-bottom:2px dashed #fff8}
.packart.tear .top{animation:tear .6s forwards}.packart.tear{animation:drop .9s .4s forwards}
@keyframes wob{50%{transform:rotate(2deg) scale(1.03)}}@keyframes tear{to{transform:translate(120px,-180px) rotate(50deg);opacity:0}}
@keyframes drop{to{transform:translateY(600px);opacity:0}}
.cardwrap{perspective:1000px;width:240px;height:400px}
.card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.2,1)}.card.flip{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.back{background:repeating-linear-gradient(45deg,#1d2a70,#1d2a70 10px,#25358a 10px,#25358a 20px);border:3px solid #6a7bff;font-weight:900;font-size:22px}
.front{transform:rotateY(180deg);box-shadow:0 0 30px var(--g),0 0 70px var(--g);padding:10px}
.slab{background:linear-gradient(160deg,#e8eef8,#b9c4d8);border-radius:14px;color:#111;width:100%;height:100%;padding:8px;display:flex;flex-direction:column}
.label{background:#fff;border:2px solid #c22;border-radius:4px;padding:4px 6px;font-size:10px;display:flex;justify-content:space-between;font-weight:700;margin-bottom:6px}.label b{font-size:16px;color:#c22}
.slab img,.rawc img{width:100%;flex:1;object-fit:contain;border-radius:6px;min-height:0}
.rawc{width:100%;height:100%;background:#141c40;border:3px solid var(--g);border-radius:14px;padding:8px;display:flex;flex-direction:column}
.meta{text-align:center;margin-top:14px;min-height:110px}.meta h2{margin:4px 0;font-size:18px}.meta .val{font-size:26px;font-weight:900;color:var(--g)}
.choices{display:flex;gap:10px;margin-top:10px}
.burst{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--g);pointer-events:none;animation:bu 1s forwards}@keyframes bu{to{transform:translate(var(--x),var(--y));opacity:0}}
.toast{position:fixed;top:70px;left:50%;transform:translateX(-50%);background:#4ff0d0;color:#081018;padding:8px 16px;border-radius:20px;font-weight:800;z-index:20}
.auth{margin-top:30px;background:#141c40;border:1px solid #3a4a9a;border-radius:18px;padding:20px}.auth h2{margin-top:0}
.auth input{display:block;width:100%;margin:10px 0;padding:13px;border-radius:12px;border:1px solid #4a5ab0;background:#0b0f1e;color:#fff;font-size:16px}
#who{font-size:11px;opacity:.7;margin-right:8px}
.floor{display:inline-block;margin-top:8px;background:#0006;border:1px solid #fff6;border-radius:8px;padding:3px 8px;font-size:12px;font-weight:800}
.odds .b0{color:#c8d0e0}.odds .b1{color:#9fe8b0}.odds .b2{color:#8fc8ff}.odds .b3{color:#e2a8ff}.odds .b4{color:#ffe08a}
details.pk{background:#141c40;border-radius:12px;padding:10px;margin-bottom:8px}details.pk summary{font-size:14px}details.pk h4{margin:10px 0 6px;font-size:13px}
.carwrap{position:relative;margin:4px -16px 0}
.car{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}.car::-webkit-scrollbar{display:none}
.slide{flex:0 0 74%;scroll-snap-align:center;background:#121a3a;border:1px solid #ffffff1a;border-radius:20px;padding:12px;transition:transform .25s,opacity .25s;transform:scale(.92);opacity:.6}
.slide.cur{transform:none;opacity:1;box-shadow:0 10px 40px #0008}
.arr{position:absolute;top:40%;z-index:3;width:36px;height:36px;border-radius:50%;border:1px solid #fff4;background:#0b1030cc;color:#fff;font-size:24px;line-height:30px;cursor:pointer}.arr.l{left:6px}.arr.r{right:6px}
.dots{display:flex;justify-content:center;gap:6px;margin:8px 0}.dots i{width:7px;height:7px;border-radius:50%;background:#fff3}.dots i.on{background:#4ff0d0;width:18px;border-radius:4px}
.pkart{position:relative;height:250px;border-radius:14px;overflow:hidden;background:var(--pat),linear-gradient(150deg,var(--a),var(--b) 70%,#fff 140%);background-size:40px 40px,auto;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px #ffffff40;width:100%}
.packart .pkart{height:100%}
.pkart .shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ffffff70 45%,transparent 60%);background-size:250% 100%;animation:shine 3.5s linear infinite}
@keyframes shine{from{background-position:150% 0}to{background-position:-100% 0}}
.pkart .crimp{position:absolute;top:0;left:0;right:0;height:16px;background:repeating-linear-gradient(90deg,#ffffff55 0 6px,#0000 6px 12px)}.pkart .crimp.b{top:auto;bottom:0}
.pkart .brand{font-weight:900;letter-spacing:3px;font-size:15px;opacity:.95}.pkart .brand span{color:#0b1030}
.pkart .bolt{width:70px;height:70px;margin:8px 0;filter:drop-shadow(0 0 12px #fff)}
.pkart .pname{font-weight:900;font-size:28px;letter-spacing:3px;text-shadow:0 2px 8px #0007}.pkart .pcat{font-size:12px;font-weight:700;opacity:.9}
.stats{display:flex;gap:8px;margin:10px 0}.stats>div{flex:1;background:#0b1030;border-radius:12px;padding:8px;text-align:center}.stats small{display:block;font-size:10px;letter-spacing:1.5px;opacity:.75;font-weight:800}
.mp b{font-size:26px;color:#ffe08a}.mn b.floor{display:block;margin:0;background:none;border:0;padding:0;font-size:14px;color:#9fe8b0}
.stog{display:flex;background:#0b1030;border-radius:12px;padding:3px;margin:8px 0}.stog button{flex:1;border:0;background:none;color:#fffa;font-weight:800;padding:8px;border-radius:9px;cursor:pointer}.stog button.on{background:linear-gradient(90deg,#4ff0d0,#c04fff);color:#0b1030}
.c{text-align:center}.row2{display:flex;gap:8px;margin-top:10px}.row2 .btn{flex:1;padding:12px 6px;font-size:14px}
.bars{display:flex;flex-direction:column;gap:9px;margin:10px 0}.bar .bl{display:flex;justify-content:space-between;font-size:14px;font-weight:700}.bar .bt{height:10px;background:#ffffff14;border-radius:6px;overflow:hidden;margin-top:3px}.bar .bt i{display:block;height:100%;border-radius:6px}.bar .bn{font-size:11px;opacity:.65}
.sheet{position:fixed;inset:0;background:#000a;z-index:50;display:flex;align-items:flex-end}.sh{background:#121a3a;width:100%;max-height:88vh;overflow:auto;border-radius:20px 20px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
.shh{display:flex;justify-content:space-between;align-items:center;font-size:17px}.x{background:#fff2;border:0;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer}
.sh .btn.rip{width:100%;margin-top:12px}

.it.gone{opacity:.4}

/* Spacers so the first and last pack can sit dead center (percent padding was sized off a different width) */
.car::before,.car::after{content:'';flex:0 0 calc(13% - 14px)}
@media(min-width:700px){.slide{flex-basis:420px}.car::before,.car::after{flex-basis:calc(50% - 224px)}}
.meta .choices{justify-content:center}

.or{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:#8fa0e0;font-size:13px}.or:before,.or:after{content:'';flex:1;height:1px;background:#3a4a9a}
.gbtn,#glinkbtn{display:flex;justify-content:center;min-height:44px}.glink{margin:10px 0 14px;padding:12px;border:1px solid #3a4a9a;border-radius:14px;background:#141c40;text-align:center}.glink .small{display:block;margin-bottom:8px}