*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{--bg:#0b0714;--card:#160f26;--line:#2a1f45;--txt:#f3eefe;--mut:#9c90bb;--a:#ff3d7f;--b:#7c4dff;--c:#20e3b2;--gold:#ffc83d}
html,body{background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100%}
body{background:radial-gradient(120% 60% at 50% -10%,#3a1670 0%,transparent 60%),var(--bg)}
#app{max-width:480px;margin:0 auto;padding:0 16px 96px;min-height:100vh}
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 0 10px;position:sticky;top:0;z-index:5;background:linear-gradient(var(--bg) 70%,transparent)}
.logo{font-weight:900;font-size:22px;letter-spacing:1px;font-style:italic;background:linear-gradient(90deg,#fff,#d8c8ff);-webkit-background-clip:text;color:transparent}
.logo span{color:var(--a);-webkit-text-fill-color:var(--a);margin:0 2px}
.tix{background:#24183d;border:1px solid #3d2c66;border-radius:99px;padding:7px 14px;font-weight:800;transition:transform .3s}
.tix.bump{transform:scale(1.25);box-shadow:0 0 20px var(--gold)}
.demo{display:inline-block;font-size:10px;font-weight:900;letter-spacing:1px;background:var(--gold);color:#000;border-radius:4px;padding:2px 6px;vertical-align:middle}
.panel{background:linear-gradient(160deg,#1c1333,#130c22);border:1px solid var(--line);border-radius:20px;padding:16px;margin:12px 0;animation:in .45s both}
@keyframes in{from{opacity:0;transform:translateY(14px)}}
.h{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:1.5px;font-weight:700}
.big{font-size:44px;font-weight:900;line-height:1.05}
.livebox{position:relative;overflow:hidden;border-color:#5b1d3f;background:linear-gradient(160deg,#2b0f2a,#140b22)}
.livebox:before{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent,#ff3d7f33,transparent 30%);animation:spin 6s linear infinite}
.livebox>*{position:relative}
@keyframes spin{to{transform:rotate(1turn)}}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--a);margin-right:6px;box-shadow:0 0 10px var(--a);animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.3}}
.cd{font-variant-numeric:tabular-nums;font-size:40px;font-weight:900;letter-spacing:2px}
.bar{height:14px;border-radius:99px;background:#0c0817;border:1px solid var(--line);overflow:hidden;margin:10px 0 6px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--b),var(--a),var(--gold));border-radius:99px;transition:width 1.4s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 14px #ff3d7f88}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mut{color:var(--mut);font-size:13px}
.btn{display:block;width:100%;border:0;border-radius:18px;padding:18px;font-size:18px;font-weight:900;color:#fff;cursor:pointer;background:linear-gradient(90deg,var(--a),var(--b));box-shadow:0 8px 30px #ff3d7f55,inset 0 -3px 0 #0003;letter-spacing:.5px;transition:transform .15s}
.btn:active{transform:scale(.96)}.btn.sec{background:#24183d;box-shadow:none;font-size:15px;padding:14px}
.btn:disabled{opacity:.45}
.pulse{animation:glowb 1.8s infinite}@keyframes glowb{50%{box-shadow:0 8px 44px #ff3d7faa}}
.tabs{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;background:#0f0a1cee;backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:8px 4px calc(8px + env(safe-area-inset-bottom));z-index:9}
.tabs button{background:none;border:0;color:var(--mut);font-size:11px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;padding:4px}
.tabs i{font-style:normal;font-size:20px}.tabs .on{color:#fff}.tabs .on i{color:var(--a);text-shadow:0 0 12px var(--a)}
.tabs .live i{color:var(--a);animation:pulse 1.2s infinite}
.legal{font-size:11px;color:#6f6590;text-align:center;padding:18px 8px 8px;line-height:1.4}
/* pack */
.stage{min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.pack{width:220px;height:320px;border-radius:16px;position:relative;cursor:pointer;background:linear-gradient(145deg,#ff3d7f,#7c4dff 60%,#20e3b2);box-shadow:0 20px 60px #7c4dff88;animation:float 2.4s ease-in-out infinite;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden}
.pack:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#fff6 45%,transparent 60%);animation:shine 2.5s infinite}
@keyframes shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes float{50%{transform:translateY(-10px) rotate(1deg)}}
.pack b{font-size:30px;font-weight:900;font-style:italic;text-shadow:0 3px 0 #0005}.pack small{font-weight:800;opacity:.85}
.pack .tear{position:absolute;top:0;left:0;right:0;height:60px;background:inherit;border-bottom:3px dashed #fff8;transition:transform .6s cubic-bezier(.5,-0.4,.6,1.4)}
.pack.ripping{animation:shake .5s}
.pack.ripped .tear{transform:translate(120px,-140px) rotate(35deg);opacity:0}
.pack.gone{transition:transform .5s,opacity .5s;transform:translateY(300px) scale(.6);opacity:0}
@keyframes shake{20%,60%{transform:rotate(-4deg)}40%,80%{transform:rotate(4deg)}}
.burst{position:absolute;width:10px;height:10px;border-radius:50%;pointer-events:none}
.fan{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%}.fan .card{width:calc(33.3% - 7px)}
.card{aspect-ratio:5/7;perspective:800px;cursor:pointer}
.card .in{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.3,1.4,.5,1);transform-style:preserve-3d}
.card.flip .in{transform:rotateY(180deg)}
.card .f,.card .bk{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;overflow:hidden}
.card .bk{background:repeating-linear-gradient(45deg,#2a1b4d 0 8px,#22163f 8px 16px);border:2px solid #4b3780;display:flex;align-items:center;justify-content:center;font-weight:900;color:#6d58a8;font-size:20px}
.card .f{transform:rotateY(180deg);border:2px solid #ffffff30;display:flex;flex-direction:column}
.card .art{flex:1;display:flex;align-items:center;justify-content:center}
.card svg{width:85%;height:85%}
.card .nm{font-size:10px;font-weight:900;padding:4px 6px;background:#0007;display:flex;justify-content:space-between}
.r-common .f{}
.r-rare.flip .f{box-shadow:0 0 18px #4fc3ff;border-color:#4fc3ff}
.r-epic.flip .f{box-shadow:0 0 24px #c86bff;border-color:#c86bff}
.r-legend.flip .f{box-shadow:0 0 34px var(--gold);border-color:var(--gold);animation:leg 1.2s infinite}
@keyframes leg{50%{box-shadow:0 0 50px var(--gold)}}
.r-legend .f:after,.r-epic .f:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,#fff5 40%,#7cf6 50%,#f7c6 60%,transparent 75%);mix-blend-mode:overlay;animation:shine 2.2s infinite}
.bonus{position:absolute;top:-6px;right:-6px;background:var(--gold);color:#000;font-size:10px;font-weight:900;border-radius:8px;padding:2px 5px;transform:rotateY(180deg);backface-visibility:hidden;z-index:2}
.flip .bonus{animation:pop .5s .5s both}@keyframes pop{from{transform:rotateY(180deg) scale(0)}}
/* quests */
.q{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.q:last-child{border:0}
.q .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;background:#2a1d48;flex:none}
.q .t{flex:1}.q b{font-size:15px}.mini{height:6px;border-radius:9px;background:#0c0817;margin-top:6px;overflow:hidden}.mini i{display:block;height:100%;background:var(--c)}
.chip{font-size:12px;font-weight:900;padding:6px 10px;border-radius:99px;background:#20e3b222;color:var(--c);border:0}
.chip.go{background:var(--c);color:#002}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.tile{aspect-ratio:3/4;perspective:600px}.tile .in{width:100%;height:100%;position:relative;transition:transform .35s;transform-style:preserve-3d}
.tile.open .in,.tile.done .in{transform:rotateY(180deg)}
.tile .f,.tile .bk{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;display:flex;align-items:center;justify-content:center}
.tile .bk{background:linear-gradient(145deg,#3a2470,#22163f);border:2px solid #4b3780;font-size:20px;color:#8b74d0}
.tile .f{transform:rotateY(180deg);font-size:30px;background:#efeaff;border:3px solid #bbb;border-radius:10px}
.tile.done .f{border-color:var(--c);box-shadow:0 0 14px var(--c)}
.timer{font-size:28px;font-weight:900;font-variant-numeric:tabular-nums}
/* live */
.slab{width:230px;margin:0 auto;border-radius:14px;padding:10px;background:linear-gradient(160deg,#e9eef5,#b7c2d1);box-shadow:0 20px 60px #0009,inset 0 0 0 2px #fff8;position:relative;transform:rotateY(90deg) scale(.6);opacity:0;transition:transform .9s cubic-bezier(.3,1.5,.5,1),opacity .4s}
.slab.show{transform:none;opacity:1}
.slab .lab{background:#c8102e;color:#fff;border-radius:6px;padding:6px 8px;display:flex;justify-content:space-between;font-weight:900;font-size:12px}
.slab .lab em{font-style:normal;background:#fff;color:#c8102e;border-radius:4px;padding:0 6px;font-size:16px}
.slab .win{margin-top:8px;border-radius:8px;aspect-ratio:5/7;background:linear-gradient(160deg,#ffd76a,#ff7a3d 45%,#7c4dff);display:flex;align-items:center;justify-content:center;border:3px solid #fff;position:relative;overflow:hidden}
.slab .win:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,#fff8 45%,transparent 60%);animation:shine 2s infinite}
.slab .win span{font-weight:900;color:#fff;text-shadow:0 2px 6px #0008;font-size:15px;text-align:center}
.reel{height:64px;overflow:hidden;border-radius:14px;background:#0c0817;border:2px solid var(--gold);position:relative;margin-top:12px}
.reel:before,.reel:after{content:"";position:absolute;left:0;right:0;height:18px;z-index:2}.reel:before{top:0;background:linear-gradient(#0c0817,transparent)}.reel:after{bottom:0;background:linear-gradient(transparent,#0c0817)}
.reel ul{list-style:none;transition:transform 4s cubic-bezier(.15,.85,.25,1)}
.reel li{height:64px;display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:20px;font-weight:800}
.winner{text-align:center;animation:in .5s both}.winner .big{font-size:30px;color:var(--gold);text-shadow:0 0 20px #ffc83d88}
.sent{margin-top:10px;background:#20e3b21a;border:1px solid var(--c);color:var(--c);border-radius:14px;padding:12px;font-weight:800;text-align:center}
.confetti{position:fixed;top:-10px;width:8px;height:14px;z-index:50;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}
.steps{display:flex;gap:6px;margin:10px 0}.steps span{flex:1;height:5px;border-radius:9px;background:#2a1f45}.steps span.on{background:var(--a)}
/* proof */
.led{font-size:13px}.led .e{padding:12px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:34px 1fr;gap:10px}
.led .e:last-child{border:0}.led .k{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#2a1d48}
.led code{font-family:ui-monospace,monospace;color:#bda8ff;font-size:12px;word-break:break-all}
/* binder */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bgrid .card .in{transform:rotateY(180deg)}.bgrid .card.lock .f{filter:grayscale(1) brightness(.3)}
.stat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}.stat b{display:block;font-size:22px}
#toast{position:fixed;left:50%;top:70px;transform:translate(-50%,-30px);opacity:0;background:var(--gold);color:#000;font-weight:900;padding:10px 18px;border-radius:99px;z-index:60;transition:.35s;white-space:nowrap}
#toast.on{opacity:1;transform:translate(-50%,0)}
h2{font-size:24px;font-weight:900;margin:8px 0 2px}
/* ===== v2 premium polish ===== */
:root{--card:#170f2a;--line:#2d2150;--glass:#ffffff0a}
body{background:radial-gradient(120% 50% at 50% -8%,#4a1a8c 0%,transparent 60%),radial-gradient(80% 40% at 100% 100%,#ff3d7f1a,transparent 70%),var(--bg);font-feature-settings:"tnum"}
#app{padding:0 16px 112px}
.top{margin:0 -16px;padding:12px 16px;background:#0b0714d9;backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #ffffff10;box-shadow:0 6px 24px #0008}
.logo{font-size:23px}
.tix{min-height:44px;display:flex;align-items:center;gap:6px;padding:0 16px;background:linear-gradient(135deg,#3a2560,#24183d);border:1px solid #ffc83d55;box-shadow:0 0 0 1px #0006 inset,0 4px 14px #ffc83d22;color:#ffe9a8}
h2{font-size:22px;font-weight:900;letter-spacing:.2px;margin:18px 0 6px}
.panel{border-radius:22px;padding:18px;margin:14px 0;background:linear-gradient(160deg,#1f1538,#120b20);border:1px solid var(--line);box-shadow:0 1px 0 #ffffff12 inset,0 12px 30px #0006}
.mut{line-height:1.45}
.btn{min-height:56px;border-radius:18px;transition:transform .15s,box-shadow .2s,filter .2s}
.btn:active{filter:brightness(1.15)}
.btn.sec{min-height:52px;background:linear-gradient(160deg,#2c1f4b,#1f1537);border:1px solid #3d2c66}
.chip{min-height:36px;padding:8px 14px;font-size:13px}
.stat{display:flex;justify-content:space-around;text-align:center}.stat b{display:block;font-size:24px;font-weight:900}
/* bottom nav */
.tabs{left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 20px);max-width:460px;bottom:10px;border-radius:24px;border:1px solid #ffffff14;background:#140d26e6;box-shadow:0 10px 40px #000a;padding:6px}
.tabs button{min-height:56px;justify-content:center;border-radius:18px;font-size:11.5px;transition:background .2s,color .2s}
.tabs i{font-size:22px}.tabs .on{background:linear-gradient(160deg,#ff3d7f26,#7c4dff26);color:#fff}
/* slab holo */
.slab{position:relative;overflow:hidden;border-radius:12px;box-shadow:0 14px 40px #0009,0 0 0 1px #fff4 inset}
.slab:after,.holo:after{content:"";position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 30%,#ffffff55 42%,#7cf3ff44 48%,#ff9cf044 54%,transparent 66%);mix-blend-mode:overlay;animation:holo 3.2s ease-in-out infinite;pointer-events:none}
@keyframes holo{0%{transform:translateX(-60%)}60%,100%{transform:translateX(60%)}}
.holo{position:relative;overflow:hidden}
.grade{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#d61f3c,#8e0f24);color:#fff;font-weight:900;font-size:10px;letter-spacing:.8px;border-radius:5px;padding:3px 6px;box-shadow:0 2px 6px #0008}
/* cards */
.card .bk,.tile .bk{font-size:0;color:transparent;background:radial-gradient(circle at 50% 50%,#ff3d7f 0 9%,#fff 9.5% 13%,#1a1030 13.5% 16%,transparent 16.5%),linear-gradient(0deg,transparent 47%,#1a1030 47% 53%,transparent 53%),radial-gradient(circle at 50% 50%,transparent 30%,#ffffff10 31% 33%,transparent 34%),repeating-linear-gradient(45deg,#3b2478 0 6px,#311e66 6px 12px);border:2px solid #ffc83d66;box-shadow:inset 0 0 0 3px #1a1030,inset 0 0 18px #7c4dff88,0 4px 10px #0007}
.tile{transition:transform .15s}.tile:active{transform:scale(.94)}
.tile .bk{border-radius:12px}
.tile .f{background:linear-gradient(160deg,#fff,#e4dcff);border:3px solid #ffc83d;border-radius:12px;box-shadow:0 4px 12px #0007}
.tile.done .in{animation:matched .5s}@keyframes matched{50%{transform:rotateY(180deg) scale(1.12)}}
.grid4{gap:10px}
.card .in{transition:transform .8s cubic-bezier(.25,1.5,.5,1)}
.card.flip{animation:lift .8s}@keyframes lift{40%{transform:translateY(-14px) scale(1.06)}}
.pack{box-shadow:0 24px 70px #7c4dffaa,0 0 0 2px #ffffff30 inset}
.pack.ripping{animation:shake .5s,charge .5s}@keyframes charge{to{filter:brightness(1.6) saturate(1.4)}}
.cd{text-shadow:0 0 24px #ff3d7f66}
.led .e{padding:12px 0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ===== WeOwn theme ===== */
:root{--bg:#000;--card:#121212;--line:#262626;--txt:#fff;--mut:#a3a3a3;--a:#0effa8;--b:#00b37a;--c:#5dffc6;--gold:#ffd84a}
body{background:radial-gradient(110% 45% at 50% -8%,#0effa833 0%,transparent 60%),#000}
.top{background:#000d}
.logo{display:flex;align-items:center;gap:8px;font-style:normal;font-size:21px;background:none;color:#fff;-webkit-text-fill-color:#fff}
.logo img{width:38px;height:38px;border-radius:10px;object-fit:cover;background:#0effa8}
.logo span{font-size:12px;color:#0effa8;-webkit-text-fill-color:#0effa8;border:1px solid #0effa855;border-radius:99px;padding:3px 8px}
.tix{background:#121212;border-color:#0effa866;color:#0effa8;box-shadow:0 4px 14px #0effa822}
.panel{background:linear-gradient(160deg,#151515,#0b0b0b);border-color:#262626}
.livebox{border-color:#0effa855;background:linear-gradient(160deg,#03271b,#0b0b0b)}
.livebox:before{background:conic-gradient(from 0deg,transparent,#0effa833,transparent 30%)}
.btn{color:#001a10;background:linear-gradient(90deg,#0effa8,#5dffc6);box-shadow:0 8px 30px #0effa844,inset 0 -3px 0 #0003}
.btn.sec{color:#fff;background:#161616;border-color:#2e2e2e}
.pulse{animation:glowg 1.8s infinite}@keyframes glowg{50%{box-shadow:0 8px 44px #0effa8aa}}
.tabs{background:#0b0b0be6}.tabs .on{background:#0effa81f}.tabs .on i{color:#0effa8;text-shadow:0 0 12px #0effa8}
.pack{background:linear-gradient(145deg,#0effa8,#00875c 55%,#000);box-shadow:0 24px 70px #0effa866,0 0 0 2px #ffffff30 inset}
.card .bk,.tile .bk{background:radial-gradient(circle at 50% 50%,#0effa8 0 9%,#fff 9.5% 13%,#000 13.5% 16%,transparent 16.5%),linear-gradient(0deg,transparent 47%,#000 47% 53%,transparent 53%),repeating-linear-gradient(45deg,#06402c 0 6px,#04301f 6px 12px);border-color:#0effa888;box-shadow:inset 0 0 0 3px #000,inset 0 0 18px #0effa855,0 4px 10px #0007}
.tile .f{border-color:#0effa8}
.bar i{background:linear-gradient(90deg,#00b37a,#0effa8,#d8ffef);box-shadow:0 0 14px #0effa888}
.cd{text-shadow:0 0 24px #0effa855}.dot{background:#0effa8;box-shadow:0 0 10px #0effa8}
.hero{display:flex;gap:12px;align-items:center;margin:16px 0 4px;padding:14px;border-radius:22px;background:#0effa8;color:#001a10}
.hero img{width:64px;height:64px;border-radius:14px;background:#000;object-fit:cover}.hero b{display:block;font-size:18px;font-weight:900;line-height:1.15}.hero span{font-size:13px;font-weight:600}
.legal a{color:#0effa8}
.hr{display:flex;align-items:center;gap:8px}.xl{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#121212;border:1px solid #2e2e2e;color:#fff;text-decoration:none;font-weight:900;font-size:18px}
.logo span{display:none}@media(min-width:400px){.logo span{display:inline-block}}
.gslab{margin:14px auto 0;width:200px;border-radius:14px;padding:8px;background:linear-gradient(160deg,#f4f7fb,#aeb9c9);box-shadow:0 16px 40px #000a,0 0 0 1px #fff5 inset;animation:in .4s both}
.gslab.rev{animation:slabpop .5s both}@keyframes slabpop{40%{transform:scale(1.06) rotate(-1deg)}}
.glab{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,#d61f3c,#8e0f24);color:#fff;border-radius:6px;padding:5px 8px;font-size:9px;font-weight:900;letter-spacing:.6px}
.glab small{font-size:7px;opacity:.85}.glab em{font-style:normal;font-size:24px;min-width:28px;text-align:center}
.gwin{margin-top:6px;border-radius:8px;height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;border:3px solid #ffffffaa}
.gmon{font-size:72px;filter:drop-shadow(0 6px 10px #0007)}.gnm{font-weight:900;font-size:16px;margin-top:6px;text-shadow:0 2px 4px #0008}.gcond{font-size:11px;opacity:.9;margin-top:2px}
.gbtns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.gbtns button{min-height:56px;border-radius:14px;border:1px solid #2e2e2e;background:#161616;color:#fff;font-weight:900;font-size:15px;transition:transform .12s}
.gbtns button:active{transform:scale(.93)}.gbtns .ok{background:#0effa8;color:#001a10;border-color:#0effa8}.gbtns .no{background:#3a1018;border-color:#d61f3c}
.grail{position:relative;overflow:hidden;border-color:#ffd84a66;background:radial-gradient(90% 80% at 100% 0%,#ffd84a26,transparent 60%),linear-gradient(160deg,#1a1505,#0b0b0b)}
.grail:before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent,#ffd84a1f,transparent 25%);animation:spin 7s linear infinite}.grail>*{position:relative}
.gamt{font-size:34px;font-weight:900;color:#ffd84a;text-shadow:0 0 22px #ffd84a66}.gamt span{font-size:16px;color:#a3a3a3}
.gnext{font-size:13px;margin-top:2px}.gnext b{color:#fff}
.gimg{width:62px;height:86px;flex:none;border-radius:10px;padding:4px;background:linear-gradient(160deg,#f4f7fb,#aeb9c9);box-shadow:0 0 24px #ffd84a66}
.gart{height:58px;margin-top:3px;border-radius:6px;background:linear-gradient(150deg,#ff9a3c,#c2185b);display:flex;align-items:center;justify-content:center;font-size:30px}
.gimg .grade{font-size:8px;padding:2px 4px}
.gj i{background:linear-gradient(90deg,#b8860b,#ffd84a,#fff3b0);box-shadow:0 0 16px #ffd84aaa;position:relative}
.gj i:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff8,transparent);animation:shine 1.8s infinite}
.famt{font-size:28px;font-weight:900;color:#0effa8;text-shadow:0 0 18px #0effa855}.famt span{font-size:14px;color:#a3a3a3}
.myst{width:66px;height:92px;flex:none;border-radius:10px;margin-left:12px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#0effa833,transparent 70%),repeating-linear-gradient(45deg,#06402c 0 6px,#04301f 6px 12px);border:2px solid #0effa8aa;box-shadow:inset 0 0 0 3px #000,0 0 22px #0effa855}
.q{font-size:40px;font-weight:900;color:#fff;text-shadow:0 0 14px #0effa8}
.mq{font-size:30px;font-weight:900;color:#fff;background:linear-gradient(150deg,#3a3000,#000)!important;text-shadow:0 0 12px #ffd84a}
.pack.mys{background:radial-gradient(circle at 50% 40%,#0effa833,transparent 60%),repeating-linear-gradient(45deg,#06402c 0 8px,#04301f 8px 16px);border:3px solid #0effa8}
.pack.mys .q{font-size:90px;margin-bottom:6px}