:root{
  --bg:#0a0a0f; --panel:#13131c; --panel2:#1b1b27; --line:#2a2a3a;
  --text:#ecebf5; --muted:#8d8ba3; --accent:#8b5cf6;
  --t0:#9aa3b2; --t1:#4ade80; --t2:#38bdf8; --t3:#a78bfa; --t4:#fbbf24; --t5:#f472b6; --t6:#ff4d4d;
}
@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:'Be Vietnam Pro',system-ui,sans-serif;min-height:100vh;overflow-x:hidden}
button,input,select{font:inherit;color:inherit}
a{color:inherit}

.bg-stars{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(1200px 600px at 80% -10%,#2a1252 0%,transparent 60%),
   radial-gradient(900px 500px at -10% 30%,#0f2a44 0%,transparent 60%),
   radial-gradient(1px 1px at 20% 30%,#fff8,transparent),radial-gradient(1px 1px at 70% 60%,#fff6,transparent),
   radial-gradient(1px 1px at 40% 80%,#fff5,transparent),radial-gradient(1px 1px at 90% 20%,#fff7,transparent),
   var(--bg)}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:12px 20px;
  background:#0a0a0fcc;backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:20px;text-decoration:none;letter-spacing:-.5px}
.brand span{margin-left:5px!important;background:linear-gradient(90deg,#a78bfa,#f472b6,#fbbf24);-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:2px}
.tabs{display:flex;gap:4px;margin-left:8px}
.tabs a{padding:6px 14px;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:600}
.tabs a.on{background:var(--panel2);color:var(--text)}
.currency{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.rate input{width:80px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:4px 6px}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer;font-weight:600}
.chip:hover{border-color:var(--accent)}

/* ---------- hero / search ---------- */
.view{max-width:1240px;margin:0 auto;padding:24px 20px 40px}
.hero{text-align:center;padding:28px 0 12px}
.hero h1{font-size:clamp(28px,5vw,48px);margin:0 0 8px;letter-spacing:-1px}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,#a78bfa,#f472b6);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);margin:0 auto 20px;max-width:620px}
.search{display:flex;max-width:640px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px;
  box-shadow:0 0 0 0 #8b5cf600;transition:box-shadow .3s,border-color .3s}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 30px -6px #8b5cf688}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;padding:10px 12px;font-size:16px}
.search button{background:linear-gradient(135deg,#8b5cf6,#ec4899);border:0;border-radius:10px;padding:0 22px;font-weight:700;cursor:pointer}
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}
.seg{display:flex;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:3px}
.seg button{background:none;border:0;padding:6px 12px;border-radius:9px;cursor:pointer;color:var(--muted);font-weight:600;font-size:14px}
.seg button.on{background:var(--panel2);color:var(--text)}
select{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:14px}

.status{text-align:center;color:var(--muted);min-height:24px;margin:16px 0;font-size:14px}
.status .err{color:#fca5a5}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:26px 20px}
.tile{cursor:pointer;animation:rise .5s both;animation-delay:calc(var(--i,0) * 30ms)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.tile__meta{padding:10px 2px 0}
.tile__name{font-weight:700;font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile__set{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile__row{display:flex;justify-content:space-between;align-items:center;margin-top:6px;gap:6px}
.price{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:15px}
.price.na{color:var(--muted);font-size:13px}
.badge{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:3px 7px;border-radius:6px;
  color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);white-space:nowrap}
.game-tag{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}

/* ---------- holographic card ---------- */
.card{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;--px:50%;--py:50%;--o:0;--c:var(--t0);
  position:relative;aspect-ratio:63/88;perspective:900px;}
.card__tilt{position:absolute;inset:0;border-radius:4.5%/3.3%;transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s;
  box-shadow:0 10px 30px -10px #000c;will-change:transform}
.card.active .card__tilt{transition:transform .08s linear,box-shadow .4s}
.card__face{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:#1a1a24;isolation:isolate}
.card__face img{width:100%;height:100%;object-fit:cover;display:block}
.card__holo,.card__glare,.card__sparkle{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.card__glare{background:radial-gradient(farthest-corner circle at var(--mx) var(--my),#ffffffcc 0%,#ffffff33 25%,transparent 60%);
  mix-blend-mode:overlay;opacity:calc(var(--o) * .9);transition:opacity .3s}
.card__holo{opacity:0;mix-blend-mode:color-dodge;transition:opacity .3s;
  background:
   repeating-linear-gradient(110deg,#ff008422 0%,#fca40044 8%,#ffff0033 14%,#00ff8a44 20%,#00cfff44 26%,#cc4cfa44 32%,#ff008422 38%),
   repeating-linear-gradient(-45deg,#0e152e 0%,#8fa2b8 4%,#0e152e 8%);
  background-size:300% 300%,200% 200%;background-position:var(--px) var(--py),var(--py) var(--px);filter:brightness(.7) contrast(1.4) saturate(1.3)}
.card__sparkle{opacity:0;background-image:
   radial-gradient(circle,#fff 0 1px,transparent 1.6px),radial-gradient(circle,#fff 0 .8px,transparent 1.4px);
  background-size:37px 41px,23px 29px;background-position:var(--px) var(--py),var(--py) var(--px);mix-blend-mode:screen}

/* tier escalation (0 → 6) */
.t1 .card__tilt{box-shadow:0 10px 30px -10px #000c,0 0 0 1px #4ade8055}
.t2 .card__tilt{box-shadow:0 10px 30px -10px #000c,0 0 14px -2px #38bdf880}
.t2.active .card__holo{opacity:calc(var(--o) * .35)}
.t3 .card__tilt{box-shadow:0 10px 30px -10px #000c,0 0 22px -2px #a78bfaa0}
.t3 .card__holo{opacity:.15}.t3.active .card__holo{opacity:calc(.2 + var(--o) * .45)}
.t4 .card__tilt{box-shadow:0 10px 30px -10px #000c,0 0 28px 0 #fbbf24a0}
.t4 .card__holo{opacity:.25}.t4.active .card__holo{opacity:calc(.3 + var(--o) * .5)}
.t4 .card__sparkle{opacity:.25}
.t5 .card__tilt{box-shadow:0 10px 30px -10px #000c,0 0 36px 2px #f472b6b0}
.t5 .card__holo{opacity:.35}.t5.active .card__holo{opacity:calc(.4 + var(--o) * .55)}
.t5 .card__sparkle{opacity:.55;animation:twinkle 2.4s ease-in-out infinite}
.t6 .card__holo{opacity:.45}.t6.active .card__holo{opacity:calc(.5 + var(--o) * .5)}
.t6 .card__sparkle{opacity:.8;animation:twinkle 1.6s ease-in-out infinite}
.t6 .card__tilt{box-shadow:0 10px 40px -6px #000c,0 0 50px 6px #ff4d4d90}
.t5::before,.t6::before{content:"";position:absolute;inset:-3px;border-radius:6%/4.4%;z-index:-1;
  background:conic-gradient(from var(--angle),#ff4d4d,#fbbf24,#4ade80,#38bdf8,#a78bfa,#f472b6,#ff4d4d);
  animation:spinAngle 4s linear infinite;filter:blur(2px)}
.t5::before{opacity:.55}
@keyframes spinAngle{to{--angle:360deg}}
@keyframes twinkle{50%{filter:brightness(1.8)}}

/* demo "thẻ nhảm" art */
.nham-art{position:absolute;inset:0;display:flex;flex-direction:column;padding:7%;
  background:linear-gradient(160deg,var(--a1),var(--a2));color:#fff}
.nham-art__top{display:flex;justify-content:space-between;font-weight:800;font-size:clamp(9px,.85vw,13px);text-shadow:0 1px 2px #0008}
.nham-art__pic{flex:1;margin:6% 0;border-radius:6px;display:grid;place-items:center;font-size:clamp(40px,5vw,80px);
  background:radial-gradient(circle at 50% 40%,#ffffff55,#0000 70%),#0003;border:2px solid #fff6}
.nham-art__txt{font-size:clamp(8px,.7vw,11px);background:#0005;border-radius:4px;padding:5px 6px;line-height:1.35}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:#000b;backdrop-filter:blur(6px);animation:fade .25s}
.modal__box{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:20px;max-width:880px;width:100%;
  max-height:92vh;overflow:auto;animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes fade{from{opacity:0}}@keyframes pop{from{opacity:0;transform:scale(.92)}}
.modal__x{position:absolute;right:12px;top:8px;background:none;border:0;font-size:30px;cursor:pointer;color:var(--muted);z-index:2}
.modal__body{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:28px;padding:28px}
.modal__body .card{width:100%}
.detail h2{margin:4px 0 4px;font-size:26px;line-height:1.2}
.detail .sub{color:var(--muted);margin-bottom:14px}
.big-price{font-family:'JetBrains Mono',monospace;font-size:34px;margin:10px 0 2px}
.big-price small{display:block;font-size:14px;color:var(--muted)}
.ptable{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
.ptable td{padding:8px 4px;border-bottom:1px solid var(--line)}
.ptable td:last-child{text-align:right;font-family:'JetBrains Mono',monospace}
.ext{display:inline-block;margin-top:6px;padding:8px 14px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);text-decoration:none;font-weight:600}
.ext:hover{border-color:var(--accent)}
@media (max-width:680px){.modal__body{grid-template-columns:1fr;padding:20px}.modal__body .card{max-width:260px;margin:0 auto}
  .topbar{flex-wrap:wrap}.currency{margin-left:0}.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:18px 12px}}

/* ---------- gacha ---------- */
.gacha-actions{display:flex;gap:12px;justify-content:center;align-items:center}
.big-btn{font-size:20px;font-weight:800;padding:16px 40px;border-radius:16px;border:0;cursor:pointer;
  background:linear-gradient(135deg,#8b5cf6,#ec4899,#f59e0b);background-size:200% 200%;animation:shift 4s ease infinite;
  box-shadow:0 10px 40px -10px #ec4899}
.big-btn:active{transform:scale(.97)}
.big-btn:disabled{opacity:.5;cursor:wait}
@keyframes shift{50%{background-position:100% 50%}}
.odds{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.pack-area{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:20px;min-height:40px}
.slot{width:min(180px,40vw);aspect-ratio:63/88;perspective:1000px;cursor:pointer;animation:deal .6s cubic-bezier(.2,1.2,.4,1) both;
  animation-delay:calc(var(--i) * 110ms)}
@keyframes deal{from{opacity:0;transform:translateY(-120px) rotate(-12deg) scale(.6)}}
.slot__inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,1.4,.5,1)}
.slot.flipped .slot__inner{transform:rotateY(180deg)}
.slot__back,.slot__front{position:absolute;inset:0;backface-visibility:hidden;border-radius:4.5%/3.3%}
.slot__front{transform:rotateY(180deg)}
.slot__back{background:
   repeating-linear-gradient(45deg,#ffffff08 0 8px,transparent 8px 16px),
   radial-gradient(circle at 50% 50%,#8b5cf6,#2a1252 70%);
  border:3px solid #ffffff22;display:grid;place-items:center;font-weight:800;font-size:22px;letter-spacing:2px;color:#fff9;
  box-shadow:0 10px 30px -10px #000}
.slot:not(.flipped):hover .slot__back{filter:brightness(1.2)}
.slot.hint .slot__back{box-shadow:0 0 30px 4px var(--c)}
.slot__front .card{position:absolute;inset:0}
.burst{position:absolute;inset:-40%;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,var(--c) 0%,transparent 60%);opacity:0;animation:burst .9s ease-out}
@keyframes burst{30%{opacity:.9}to{opacity:0;transform:scale(1.4)}}
.slot__label{text-align:center;margin-top:8px;font-size:13px;min-height:36px}
.pack-result{text-align:center;margin:22px 0;font-size:18px;min-height:28px}
.pack-result b{font-family:'JetBrains Mono',monospace}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;max-width:760px;margin:20px auto 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.stat b{display:block;font-size:22px;font-family:'JetBrains Mono',monospace;margin-top:4px}
.stat span{color:var(--muted);font-size:12px}

/* ---------- gacha v2 ---------- */
.hero--sm{padding:16px 0 4px}
.hero--sm h1{font-size:clamp(26px,4vw,40px)}
.coin-chip{text-decoration:none;color:#fde68a;font-family:'JetBrains Mono',monospace}
.new-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#f472b6;box-shadow:0 0 8px #f472b6;vertical-align:2px}
.new-dot[hidden]{display:none}
.wallet-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin:18px auto;max-width:820px}
.wallet{display:flex;align-items:baseline;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 16px}
.wallet b{font-family:'JetBrains Mono',monospace;font-size:24px;color:#fde68a}
.wallet small{color:var(--muted)}
.wallet.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.08)}}
.chip:disabled{opacity:.45;cursor:not-allowed}
.chip--glow{border-color:#fbbf24;box-shadow:0 0 16px -4px #fbbf24}
.chip--danger:hover{border-color:#f87171;color:#fca5a5}
.pity{flex:1;min-width:220px;max-width:320px}
.pity__top{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:5px}
.bar{height:8px;background:var(--panel2);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#a78bfa,#fbbf24);border-radius:inherit;transition:width .6s}
.bar--big{height:12px}

.checkin{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;max-width:900px;margin:0 auto 18px;padding:18px 22px;
  border-radius:18px;background:linear-gradient(135deg,#1c1530,#141420);border:1px solid var(--line)}
.checkin.ready{border-color:#fbbf2466;box-shadow:0 0 30px -12px #fbbf24}
.checkin.shake{animation:shake .5s}
.checkin__txt{flex:1;min-width:220px}
.checkin h3{margin:0 0 4px;font-size:18px}
.checkin p{margin:0;color:var(--muted);font-size:13px}
.ci-dots{display:flex;gap:8px}
.ci-slot{width:78px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;border-radius:12px;
  border:1px solid var(--line);background:#0006;font-size:13px;text-align:center}
.ci-slot .ci-ic{font-size:20px;line-height:1.2}
.ci-slot small{color:var(--muted);font-size:10px}
.ci-slot em{font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-top:2px;color:var(--muted)}
.ci-slot.done{border-color:#4ade80aa;background:#4ade8018}.ci-slot.done .ci-ic,.ci-slot.done em{color:#4ade80}
.ci-slot.open{border-color:#fbbf24;box-shadow:0 0 18px -4px #fbbf24;animation:pulse 1.6s ease-in-out infinite}.ci-slot.open em{color:#fbbf24}
.ci-slot.missed{opacity:.45}.ci-slot.missed em{color:#f87171}
.ci-slot.later{opacity:.6}
@keyframes pulse{50%{box-shadow:0 0 26px 0 #fbbf24}}
.checkin .big-btn{font-size:16px;padding:12px 22px}
.checkin .big-btn:disabled{animation:none;background:var(--panel2);box-shadow:none;color:var(--muted);cursor:not-allowed;opacity:1}
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;max-width:900px;margin:0 auto}
.pack{position:relative;overflow:hidden;border-radius:18px;padding:18px;border:1px solid #ffffff22;
  background:linear-gradient(150deg,var(--p1),var(--p2));display:flex;flex-direction:column;gap:6px;min-height:170px}
.pack::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,#ffffff40 45%,transparent 60%);background-size:250% 100%;animation:sheen 3.5s ease-in-out infinite}
@keyframes sheen{0%{background-position:150% 0}60%,100%{background-position:-60% 0}}
.pack h3{margin:0;font-size:19px}
.pack p{margin:0;font-size:13px;color:#ffffffcc;flex:1}
.pack button{margin-top:8px;border:0;border-radius:12px;padding:11px;font-weight:800;cursor:pointer;background:#0009;color:#fff;font-size:15px;position:relative;z-index:1}
.pack button:hover:not(:disabled){background:#000c}
.pack button:disabled{opacity:.5;cursor:not-allowed}
.pack.shake{animation:shake .5s}
@keyframes shake{20%,60%{transform:translateX(-5px) rotate(-1deg)}40%,80%{transform:translateX(5px) rotate(1deg)}}

.slot .tag-new{position:absolute;top:-8px;right:-8px;z-index:3;background:#f472b6;color:#fff;font-size:11px;font-weight:800;padding:3px 7px;border-radius:7px;
  transform:scale(0);transition:transform .3s .5s cubic-bezier(.3,1.6,.5,1)}
.slot.flipped .tag-new{transform:scale(1)}
.slot.pity-hit .slot__back{outline:2px dashed #fbbf24;outline-offset:3px}

.odds-box{max-width:820px;margin:10px auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.odds-box summary{cursor:pointer;color:var(--muted);font-weight:600}
.otable{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
.otable th,.otable td{padding:6px;border-bottom:1px solid var(--line);text-align:right;font-family:'JetBrains Mono',monospace}
.otable th:first-child,.otable td:first-child{text-align:left;font-family:inherit}

.history{max-width:820px;margin:24px auto 0}
.history h3{font-size:16px;margin:0 0 10px}
.hrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px;flex-wrap:wrap}
.hrow time{color:var(--muted);font-family:'JetBrains Mono',monospace;min-width:92px}
.hrow .dots{display:flex;gap:3px;flex:1}
.hrow .dots i{width:10px;height:14px;border-radius:2px;background:var(--c)}
.hrow .val{font-family:'JetBrains Mono',monospace}

/* collection */
.album{max-width:820px;margin:16px auto}
.album__top{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px;color:var(--muted)}
.album__top b{color:var(--text)}
.achv{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:900px;margin:12px auto}
.ach{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:7px 12px;font-size:13px}
.ach .ic{font-size:18px}
.ach small{display:block;color:var(--muted);font-size:11px}
.ach.locked{opacity:.4;filter:grayscale(1)}
.ach.done{border-color:#fbbf2488}
.col-filters{margin-top:20px}
.check{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);cursor:pointer}
.col-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:12px 0 4px}
.tile{position:relative}
.cnt{position:absolute;top:-9px;left:-7px;z-index:3;background:#000c;border:1px solid #ffffff33;border-radius:8px;padding:2px 7px;font-weight:800;font-size:12px;font-family:'JetBrains Mono',monospace}
.newtag{position:absolute;top:-9px;right:-7px;z-index:3;background:#f472b6;color:#fff;font-size:10px;font-weight:800;padding:2px 6px;border-radius:6px}
.favtag{position:absolute;bottom:calc(100% - 40px);right:10px;z-index:3;font-size:16px;filter:drop-shadow(0 1px 2px #000)}
.tile.missing .card__face{background:repeating-linear-gradient(45deg,#16161f 0 10px,#12121a 10px 20px);border:2px dashed color-mix(in srgb,var(--c) 45%,transparent)}
.tile.missing .miss{position:absolute;inset:0;display:grid;place-items:center;font-size:44px;font-weight:800;color:color-mix(in srgb,var(--c) 55%,transparent)}
.tile.missing{cursor:default}
.tile.missing .tile__name{color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.owned-info{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:14px;font-size:13px;color:var(--muted)}
.owned-info b{color:var(--text)}

.toasts{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(92vw,420px)}
.toast{background:#1f1f2ef2;border:1px solid var(--line);border-left:4px solid var(--c,#8b5cf6);border-radius:12px;padding:10px 14px;font-size:14px;
  box-shadow:0 10px 30px -10px #000;animation:toastIn .35s cubic-bezier(.2,1.3,.4,1);width:100%}
.toast.out{opacity:0;transform:translateY(10px);transition:.3s}
@keyframes toastIn{from{opacity:0;transform:translateY(20px)}}

/* ---------- màn mở thẻ ---------- */
.stage{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;overflow:hidden;user-select:none;-webkit-user-select:none;
  background:radial-gradient(ellipse at 50% 45%,#22143d 0%,#0b0814 55%,#030305 100%);animation:fade .3s}
.stage[hidden]{display:none}
.stage__fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.stage__rays{position:absolute;left:50%;top:46%;width:180vmax;height:180vmax;margin:-90vmax 0 0 -90vmax;pointer-events:none;opacity:0;transition:opacity .5s;
  background:repeating-conic-gradient(from 0deg,var(--rc,#fff) 0deg 5deg,transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 0%,transparent 42%);mask:radial-gradient(circle,#000 0%,transparent 42%);animation:raySpin 16s linear infinite}
.stage.rays-on .stage__rays{opacity:var(--ro,.3)}
@keyframes raySpin{to{transform:rotate(360deg)}}
.stage__flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:6}
.stage__flash.go{animation:flashA .8s ease-out}
@keyframes flashA{0%{opacity:var(--fo,.8)}100%{opacity:0}}
.stage.shake .stage__center{animation:stShake .45s}
@keyframes stShake{20%{transform:translate(calc(var(--sh) * -1),var(--sh))}40%{transform:translate(var(--sh),calc(var(--sh) * -1))}
  60%{transform:translate(calc(var(--sh) * -1),0)}80%{transform:translate(var(--sh),var(--sh))}}
.stage__top{position:relative;z-index:7;display:flex;gap:8px;align-items:center;width:100%;max-width:1000px;padding:14px 16px}
.stage__top span{flex:1;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage__top .chip[hidden]{display:none}
.stage__center{position:relative;z-index:4;flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;min-height:0}
.stage__hint{position:relative;z-index:7;min-height:28px;padding:0 16px;font-size:14px;color:#fffc;font-weight:600;animation:blink 1.6s ease-in-out infinite;text-align:center}
@keyframes blink{50%{opacity:.4}}
.stage__tray{position:relative;z-index:7;display:flex;gap:6px;padding:8px 16px 18px;flex-wrap:wrap;justify-content:center}
.tray-slot{width:36px;height:50px;border-radius:5px;border:1px dashed #ffffff30;display:grid;place-items:center;font-size:18px;font-style:normal;overflow:hidden;background:#ffffff08}
.tray-slot.filled{border:2px solid var(--c);box-shadow:0 0 10px -2px var(--c);animation:trayIn .45s cubic-bezier(.3,1.6,.5,1)}
.tray-slot img{width:100%;height:100%;object-fit:cover}
@keyframes trayIn{from{transform:translateY(-70px) scale(1.8);opacity:0}}

.spack{position:relative;width:min(240px,56vw);aspect-ratio:.68;animation:float 2.6s ease-in-out infinite;filter:drop-shadow(0 24px 40px #000)}
@keyframes float{50%{transform:translateY(-12px) rotate(1deg)}}
.spack__top,.spack__body{position:absolute;left:0;right:0;background:linear-gradient(150deg,var(--p1),var(--p2));overflow:hidden}
.spack__top{top:0;height:15%;border-radius:14px 14px 0 0;transition:transform .8s cubic-bezier(.3,.7,.4,1),opacity .8s;
  clip-path:polygon(0 0,100% 0,100% 80%,95% 100%,90% 80%,85% 100%,80% 80%,75% 100%,70% 80%,65% 100%,60% 80%,55% 100%,50% 80%,45% 100%,40% 80%,35% 100%,30% 80%,25% 100%,20% 80%,15% 100%,10% 80%,5% 100%,0 80%)}
.spack__body{top:13%;bottom:0;border-radius:0 0 14px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;border:1px solid #ffffff30}
.spack__body span{font-size:64px}.spack__body b{font-size:20px}.spack__body small{color:#fffb}
.spack__top::after,.spack__body::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ffffff50 45%,transparent 60%);background-size:250% 100%;animation:sheen 2.5s ease-in-out infinite}
.spack::before{content:"";position:absolute;left:-6%;right:-6%;top:13%;height:4px;background:var(--g);border-radius:9px;opacity:0;z-index:2;
  box-shadow:0 0 30px 10px var(--g);transition:opacity .3s,box-shadow .3s}
.spack.charge{animation:packShake .1s linear infinite}
.spack.charge::before{opacity:.7}
@keyframes packShake{25%{transform:translate(-3px,1px) rotate(-1deg)}75%{transform:translate(3px,-1px) rotate(1deg)}}
.spack.tearing{animation:none}
.spack.tearing::before{opacity:1;box-shadow:0 0 90px 45px var(--g)}
.spack.tearing .spack__top{transform:translate(110px,-230px) rotate(38deg);opacity:0}
.spack.tearing .spack__body{animation:bodyOut .55s .45s forwards}
@keyframes bodyOut{to{transform:translateY(80px) scale(.85);opacity:0}}

.sstack{position:relative;width:min(280px,62vw,calc((100vh - 290px) * .716));aspect-ratio:63/88;flex-shrink:0}
.sback{position:absolute;inset:0;border-radius:4.5%/3.3%;display:grid;place-items:center;font-weight:900;font-size:34px;letter-spacing:3px;color:#fff9;
  background:repeating-linear-gradient(45deg,#ffffff08 0 8px,transparent 8px 16px),radial-gradient(circle at 50% 50%,#8b5cf6,#2a1252 70%);border:3px solid #ffffff22}
.sback.under{transform:translate(calc(var(--k) * 5px),calc(var(--k) * -5px));filter:brightness(calc(1 - var(--k) * .14));box-shadow:0 10px 30px -10px #000}
.scard{position:absolute;inset:0;perspective:1200px;animation:cardIn .4s cubic-bezier(.3,1.4,.5,1)}
@keyframes cardIn{from{transform:translateY(30px) scale(.94);opacity:0}}
.scard__in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,1.3,.5,1)}
.scard .sback,.scard .sfront{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.scard .sfront{position:absolute;inset:0;transform:rotateY(180deg)}
.scard .sfront .card{position:absolute;inset:0}
.scard.flipped .scard__in{transform:rotateY(180deg) scale(1.06)}
.scard.charging .sback{border-color:var(--c);transition:box-shadow .2s,border-color .2s;
  box-shadow:0 0 calc(var(--lv,1) * 14px) calc(var(--lv,1) * 3px) var(--c),inset 0 0 calc(var(--lv,1) * 10px) var(--c)}
.scard.pulse .scard__in{animation:pulseCard .25s}
@keyframes pulseCard{40%{transform:scale(1.05)}}
.scard.leave{animation:leave .3s ease-in forwards}
@keyframes leave{to{transform:translateY(55vh) scale(.15);opacity:0}}
.slam{position:relative;z-index:6;height:clamp(44px,8vw,80px);margin-bottom:10px;pointer-events:none;text-align:center;white-space:nowrap;
  font-weight:900;font-size:clamp(28px,6vw,62px);letter-spacing:2px;text-transform:uppercase;color:var(--c);text-shadow:0 0 22px var(--c),0 4px 0 #0008;opacity:0}
.slam.go{animation:slam .55s cubic-bezier(.2,1.6,.4,1) forwards}
.slam.out{transition:opacity .2s;opacity:0!important;animation:none}
.slam.s6{animation:slam .55s cubic-bezier(.2,1.6,.4,1) forwards,hue 1.4s linear infinite}
@keyframes hue{to{filter:hue-rotate(360deg)}}
@keyframes slam{from{opacity:0;transform:scale(2.6)}to{opacity:1;transform:scale(1)}}
.stamp{display:inline-block;margin-left:10px;font-size:.33em;vertical-align:middle;padding:4px 8px;border-radius:8px;background:#ec4899;color:#fff;
  -webkit-text-fill-color:#fff;text-shadow:none;transform:rotate(-8deg);letter-spacing:1px}
.stamp.gold{background:#d97706}
.stprice{position:relative;z-index:6;margin-top:16px;text-align:center;min-height:54px}
.stprice b{display:block;font-size:17px}
.stprice span{font-family:'JetBrains Mono',monospace;font-size:22px;color:var(--c,#fff)}
.ssum{width:100%;max-width:1000px;max-height:100%;overflow:auto;padding:0 16px 10px;text-align:center;cursor:default}
.ssum h2{margin:0 0 14px}
.ssum__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.ssum__item{width:min(140px,27vw);font-size:13px;animation:rise .4s both;animation-delay:calc(var(--i) * 60ms)}
.ssum__item .card{width:100%;margin-bottom:6px}
.ssum__total{font-size:18px;margin:16px 0}
.ssum__total b{font-family:'JetBrains Mono',monospace}

/* ---------- gói thẻ (vuốt để xé) ---------- */
.xpack-wrap{animation:float 2.8s ease-in-out infinite;perspective:1000px}
.xpack{--rx:0deg;--ry:0deg;--mx:50%;--jx:0px;position:relative;width:min(250px,56vw,calc((100vh - 260px) * .66));aspect-ratio:.66;touch-action:none;cursor:grab;
  filter:drop-shadow(0 26px 36px #000c);transform:translateX(var(--jx))}
.xpack.grab{cursor:grabbing}
.xpack__tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease-out}
.xpack__back,.xpack__front,.xpack__strip{position:absolute;inset:0}
.xpack__back{background:linear-gradient(150deg,color-mix(in srgb,var(--p2) 70%,#000),#000)}
.xpack__front,.xpack__strip{background:
   repeating-linear-gradient(90deg,#ffffff0d 0 1px,transparent 1px 7px),
   linear-gradient(160deg,color-mix(in srgb,var(--p1) 85%,#fff) 0%,var(--p1) 30%,var(--p2) 75%,color-mix(in srgb,var(--p2) 70%,#000) 100%);
  box-shadow:inset 8px 0 12px -8px #0008,inset -8px 0 12px -8px #0008}
.xpack__foil{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;
  background:
   linear-gradient(115deg,transparent calc(var(--mx) - 25%),#ffffffaa var(--mx),transparent calc(var(--mx) + 25%)),
   repeating-linear-gradient(125deg,#ff008033 0 4%,#ffd70033 8%,#00ffa033 12%,#00c8ff33 16%,#c050ff33 20%,#ff008033 24%);
  background-size:100% 100%,300% 300%;background-position:0 0,var(--mx) 50%}
.xpack__art{position:absolute;inset:22% 8% 8%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:#fff}
.xpack__brand{position:absolute;top:0;font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;opacity:.8}
.xpack__icon{font-size:clamp(48px,9vw,74px);width:1.6em;height:1.6em;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle,#ffffff55,#ffffff10 60%,transparent 70%);filter:drop-shadow(0 6px 10px #0007)}
.xpack__art b{font-size:clamp(16px,2.4vw,22px);text-transform:uppercase;letter-spacing:1px;text-shadow:0 2px 6px #0008}
.xpack__art small{font-size:11px;opacity:.8}
.xpack__striptxt{position:absolute;left:0;right:0;top:calc(var(--ty, 17%) - 9%);top:7.5%;text-align:center;font-size:9px;font-weight:800;letter-spacing:1px;color:#fffc;white-space:nowrap}
.xpack__strip{transform-origin:100% 17%;transition:transform .08s linear;
  transform:translateY(calc(var(--tear) * -10px)) rotate(calc(var(--tear) * -9deg))}
.xpack__crack{position:absolute;left:0;top:calc(17% - 2px);height:4px;width:calc(var(--tear) * 100%);border-radius:4px;pointer-events:none;
  background:linear-gradient(90deg,#fff,var(--g));box-shadow:0 0 calc(8px + var(--tear) * 30px) calc(2px + var(--tear) * 10px) var(--g);opacity:calc(var(--tear) * 4)}
.xpack__guide{position:absolute;left:4%;right:4%;top:calc(17% - 1px);border-top:2px dashed #ffffffb0;pointer-events:none;opacity:calc(1 - var(--tear) * 6);transition:opacity .2s}
.xpack__hand{position:absolute;top:2px;left:0;font-size:26px;animation:handSwipe 1.8s ease-in-out infinite;filter:drop-shadow(0 2px 4px #000)}
@keyframes handSwipe{0%{transform:translateX(-10px);opacity:0}15%{opacity:1}75%{opacity:1}100%{transform:translateX(min(200px,46vw));opacity:0}}
.xpack__cards{position:absolute;inset:7% 9% 6%;transition:transform .7s cubic-bezier(.2,.9,.3,1.1)}
.xpack__cards .sback{font-size:24px;border-width:2px;transform:translate(calc(var(--k) * 2px),calc(var(--k) * 3px))}
.xpack__beam{position:absolute;left:12%;right:12%;bottom:83%;height:90%;pointer-events:none;transform-origin:50% 100%;transform:scaleY(0);opacity:0;
  background:linear-gradient(to top,var(--g),transparent);filter:blur(10px);transition:transform .5s ease-out,opacity .5s}
.xpack.ripped .xpack__strip{transition:transform .8s cubic-bezier(.3,.6,.4,1),opacity .8s;transform:translate(120px,-260px) rotate(-55deg);opacity:0}
.xpack.ripped .xpack__crack,.xpack.ripped .xpack__guide{opacity:0;transition:opacity .4s}
.xpack.ripped .xpack__beam{transform:scaleY(1);opacity:.85}
.xpack.ripped{cursor:default}
.xpack.rise .xpack__cards{transform:translateY(-48%)}
.xpack.drop .xpack__front,.xpack.drop .xpack__back{transition:transform .6s ease-in,opacity .6s;transform:translateY(120%) rotate(6deg);opacity:0}
.xpack.drop .xpack__beam{opacity:0}
.xpack.drop .xpack__cards{transform:translateY(-30%) scale(1.15)}

/* ---------- thẻ 3D xoay tay ---------- */
.scard{cursor:grab;touch-action:none}
.scard.grabbing{cursor:grabbing}
.scard .scard__in{transition:none;will-change:transform}
.scard.pulse .scard__in{animation:none}
.scard.pulse{animation:pulseOuter .25s}
@keyframes pulseOuter{40%{transform:scale(1.05)}}
.scard .sback{flex-direction:column;display:flex;align-items:center;justify-content:center;gap:4px;overflow:hidden;
  background:
   radial-gradient(circle at 50% 50%,#ffffff22 0 22%,transparent 23%),
   repeating-conic-gradient(from 0deg at 50% 50%,#ffffff0a 0deg 10deg,transparent 10deg 20deg),
   repeating-linear-gradient(45deg,#ffffff08 0 8px,transparent 8px 16px),
   radial-gradient(circle at 50% 50%,#8b5cf6,#2a1252 72%)}
.scard .sback::before{content:"";position:absolute;inset:6%;border:2px solid #ffffff30;border-radius:4%/3%}
.scard .sback::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(115deg,transparent calc(var(--bx,50%) - 22%),#ffffffa0 var(--bx,50%),transparent calc(var(--bx,50%) + 22%))}
.sback__logo{font-size:clamp(40px,6vw,64px);font-weight:900;letter-spacing:4px;color:#fffd;text-shadow:0 0 20px #c4b5fd}
.scard .sback small{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#fff9}
.scard.revealed .sback{border-color:var(--c);box-shadow:0 0 30px 2px var(--c),inset 0 0 30px var(--c)}
.scard.revealed .sfront .card__tilt{box-shadow:0 0 40px -4px var(--c),0 10px 30px -10px #000c}
.pool-info{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;max-width:900px;margin:14px auto 0;font-size:13px;color:var(--muted)}
.pool-info b{color:var(--text);font-family:'JetBrains Mono',monospace}
.pool-info .err{color:#fca5a5}

/* Không dùng backface-visibility: Firefox làm phẳng khối 3D nên ẩn nhầm mặt trước. JS tự bật/tắt mặt theo góc xoay. */
.scard .sback,.scard .sfront{backface-visibility:visible;-webkit-backface-visibility:visible}
.scard .sfront{visibility:hidden}
.scard.show-front .sfront{visibility:visible}
.scard.show-front .sback{visibility:hidden}
.slot.flipped .slot__back,.slot:not(.flipped) .slot__front{visibility:hidden}

/* ---------- tủ trưng bày ---------- */
.pt-chip{color:#c4b5fd}
.show-head{max-width:900px}
.stat.pend{grid-column:span 2;display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center}
.stat.pend span,.stat.pend b{grid-column:1}
.stat.pend b small{font-size:13px;color:var(--muted)}
.stat.pend .bar{grid-column:1}
.stat.pend .bar i{background:linear-gradient(90deg,#a78bfa,#f472b6,#fbbf24)}
.stat.pend button{grid-column:2;grid-row:1 / span 3}
.big-btn.sm{font-size:16px;padding:12px 22px;border-radius:12px}
.big-btn:disabled{animation:none;background:var(--panel2);box-shadow:none;color:var(--muted);cursor:not-allowed}
@media (max-width:680px){.stat.pend{grid-column:auto}}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:26px 20px;max-width:1100px;margin:28px auto 10px}
.case{position:relative;display:flex;flex-direction:column;border-radius:18px;
  background:linear-gradient(180deg,#ffffff10,#ffffff03 60%);border:1px solid #ffffff1c;box-shadow:inset 0 1px 0 #ffffff25,0 24px 34px -22px #000}
.case::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse at 50% -10%,color-mix(in srgb,var(--c,#fff) 40%,transparent),transparent 60%)}
.case::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
  background:linear-gradient(120deg,transparent 30%,#ffffff12 40%,transparent 48%)}
.case__inner{position:relative;margin:16px 16px 0;aspect-ratio:63/88;display:grid;place-items:center;background:none;border:0;color:inherit;font:inherit}
.case__inner .card{width:100%}
.case.filled .case__inner{cursor:pointer;filter:drop-shadow(0 14px 18px #000a)}
.case__base{margin-top:14px;padding:10px 12px 12px;border-radius:0 0 18px 18px;text-align:center;font-size:13px;
  background:linear-gradient(180deg,#3b2a1a,#22180f);border-top:2px solid #6b4a2b;box-shadow:inset 0 1px 0 #ffffff22;min-height:58px}
.case__base b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fde68a}
.case__base em{font-style:normal;color:#c4b5fd;font-family:'JetBrains Mono',monospace;font-size:12px}
.case__rm{position:absolute;top:6px;right:8px;z-index:6;width:26px;height:26px;border-radius:50%;border:1px solid #ffffff33;background:#000a;color:#fff;cursor:pointer;opacity:.6}
.case__rm:hover{opacity:1;border-color:#f87171}
.case.empty .case__inner{cursor:pointer;border:2px dashed #ffffff30;border-radius:12px;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:.2s}
.case.empty .case__inner:hover{border-color:var(--accent);color:var(--text);background:#8b5cf610}
.case .plus{font-size:42px;line-height:1}
.case.locked{opacity:.6}
.case.locked .case__inner{border-radius:12px;background:repeating-linear-gradient(45deg,#ffffff06 0 10px,transparent 10px 20px);display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center}
.case.locked small{color:var(--muted);font-size:11px}
.case .lock{font-size:34px}
.show-rates{text-align:center;color:var(--muted);font-size:13px;line-height:2;max-width:900px;margin:16px auto 0}
.modal__body.picker{display:block}
.modal__body.picker .sub{color:var(--muted)}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px;margin-top:14px}
.pick{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:10px;cursor:pointer;color:inherit;font:inherit;font-size:12px;display:flex;flex-direction:column;gap:6px;text-align:center}
.pick:hover{border-color:var(--accent)}
.pick .card{width:100%}
.pick b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick em{font-style:normal;color:#c4b5fd}
.ptgain{color:#c4b5fd;font-weight:700}

/* ---------- cửa hàng ---------- */
.shop-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin:16px 0}
.shop-bar .wallet b{color:#c4b5fd}
.shop-pv{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px 30px;justify-items:center;align-items:center;max-width:640px;margin:0 auto 24px;
  padding:30px 24px 18px;border-radius:22px;border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(ellipse at 50% 45%,#22143d 0%,#0b0814 55%,#030305 100%)}
.pv-card{position:relative;width:min(190px,36vw);aspect-ratio:63/88}
.pv-card .card{width:100%}
.pv-back .sback{position:absolute;inset:0;transition:transform .4s;box-shadow:0 18px 30px -12px #000}
.pv-back:hover .sback{transform:rotateY(-14deg) rotateX(6deg)}
.pv-note{grid-column:1 / -1;margin:0;color:#fffa;font-size:13px;text-align:center}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;max-width:1100px;margin:0 auto}
.sitem{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:.2s}
.sitem:hover{border-color:#8b5cf688;transform:translateY(-2px)}
.sitem.pv{border-color:var(--accent);box-shadow:0 0 0 2px #8b5cf655}
.sitem.using{border-color:#4ade80aa}
.sitem small{color:var(--muted);font-size:12px;flex:1}
.sitem .chip.buy{border-color:#a78bfa;color:#ddd6fe}
.mini{position:relative;width:62%;margin:0 auto 6px;aspect-ratio:63/88}
.mini .sback{position:absolute;inset:0}
.mini .sback__logo{font-size:24px}
.mini .card{width:100%}
.mini-bg{width:100%;aspect-ratio:16/10;border-radius:10px;display:grid;place-items:center;font-size:28px;border:1px solid #ffffff1a;
  background:radial-gradient(ellipse at 50% 45%,#22143d 0%,#0b0814 55%,#030305 100%)}
.sback .sback__logo{position:relative;z-index:1}
.pv-back .sback,.mini .sback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;overflow:hidden}
.pv-back .sback__logo{font-size:clamp(40px,6vw,60px);font-weight:900;letter-spacing:4px}
.sback small{position:relative;z-index:1;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fff9}

/* ---------- khung thẻ ---------- */
.card__frame,.card__deco{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4}
.card__deco::before,.card__deco::after{position:absolute;font-size:clamp(14px,1.8vw,24px);line-height:1;filter:drop-shadow(0 2px 3px #000a)}
:is(.fr-silver,.fr-gold,.fr-neon,.fr-sakura,.fr-fire,.fr-ice,.fr-rainbow,.fr-dragon,.fr-pixel) .card__frame{
  border:var(--fw,5px) solid transparent;background:var(--fg) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude}
.fr-silver .card__frame{--fw:5px;--fg:linear-gradient(135deg,#fff,#94a3b8 30%,#f1f5f9 50%,#64748b 70%,#e2e8f0)}
.fr-pixel .card__frame{--fw:7px;--fg:repeating-conic-gradient(#facc15 0 25%,#1e293b 0 50%) 0 0/12px 12px;border-radius:3px}
.fr-gold .card__frame{--fw:6px;--fg:linear-gradient(110deg,#a16207,#fde68a 15%,#d4a017 30%,#fff7c2 45%,#a16207 60%,#fde68a 80%,#a16207);background-size:300% 100%;animation:frSheen 4s linear infinite}
.fr-gold .card__face{box-shadow:0 0 18px -2px #fbbf2488}
@keyframes frSheen{to{background-position:300% 0}}
.fr-neon .card__frame{--fw:4px;--fg:linear-gradient(90deg,#22d3ee,#e879f9,#22d3ee,#e879f9,#22d3ee);background-size:300% 100%;animation:frSheen 3s linear infinite}
.fr-neon .card__face{box-shadow:0 0 12px 2px #22d3ee88,0 0 26px 6px #e879f955}
.fr-sakura .card__frame{--fw:6px;--fg:linear-gradient(160deg,#fbcfe8,#f472b6 35%,#fdf2f8 55%,#ec4899 80%,#fbcfe8)}
.fr-sakura .card__deco::before{content:"🌸";top:-9px;left:-8px}
.fr-sakura .card__deco::after{content:"🌸";bottom:-9px;right:-8px;transform:rotate(40deg)}
.fr-ice .card__frame{--fw:6px;--fg:linear-gradient(160deg,#f0f9ff,#7dd3fc 30%,#ffffff 50%,#0ea5e9 75%,#e0f2fe)}
.fr-ice .card__face{box-shadow:0 0 16px -2px #7dd3fcaa}
.fr-ice .card__deco::before{content:"❄️";top:-9px;right:-8px}
.fr-ice .card__deco::after{content:"❄️";bottom:-9px;left:-8px}
.fr-fire .card__frame{--fw:6px;--fg:conic-gradient(from var(--angle),#7c2d12,#f97316,#fde047,#ef4444,#7c2d12,#f97316,#fde047,#7c2d12);animation:spinAngle 2.4s linear infinite}
.fr-fire .card__face{animation:flick 1.1s ease-in-out infinite alternate}
@keyframes flick{from{box-shadow:0 0 14px 0 #f9731688}to{box-shadow:0 0 26px 6px #ef4444aa}}
.fr-fire .card__deco::after{content:"🔥";bottom:-12px;left:50%;transform:translateX(-50%)}
.fr-rainbow .card__frame{--fw:6px;--fg:conic-gradient(from var(--angle),#ff4d4d,#fbbf24,#4ade80,#38bdf8,#a78bfa,#f472b6,#ff4d4d);animation:spinAngle 3s linear infinite}
.fr-rainbow .card__face{box-shadow:0 0 22px -2px #a78bfaaa}
.fr-dragon .card__frame{--fw:8px;--fg:linear-gradient(135deg,#7f1d1d,#fbbf24 18%,#dc2626 36%,#fde68a 52%,#991b1b 70%,#fbbf24 86%,#7f1d1d);background-size:200% 200%;animation:frSheen 5s linear infinite}
.fr-dragon .card__face{box-shadow:0 0 24px 2px #fbbf2499}
.fr-dragon .card__deco::before{content:"🐉";top:-12px;left:-10px;font-size:clamp(18px,2.2vw,30px)}
.fr-dragon .card__deco::after{content:"🐉";bottom:-12px;right:-10px;transform:scaleX(-1);font-size:clamp(18px,2.2vw,30px)}

/* ---------- mặt lưng thẻ ---------- */
:is(.bk-ocean,.bk-sakura,.bk-carbon,.bk-jade,.bk-gold,.bk-galaxy,.bk-matrix,.bk-holo) :is(.sback,.slot__back){border-color:#ffffff33}
.bk-ocean :is(.sback,.slot__back){background:repeating-radial-gradient(circle at 50% 115%,#ffffff16 0 5px,transparent 5px 16px),radial-gradient(circle at 50% 100%,#0ea5e9,#0c4a6e 55%,#082f49)}
.bk-sakura :is(.sback,.slot__back){background:radial-gradient(circle at 30% 30%,#fff9 0 2.5px,transparent 3.5px) 0 0/34px 34px,radial-gradient(circle at 70% 65%,#ffe4f1 0 2px,transparent 3px) 0 0/23px 23px,linear-gradient(160deg,#f9a8d4,#db2777 60%,#831843)}
.bk-carbon :is(.sback,.slot__back){border-color:#dc2626;background:repeating-linear-gradient(45deg,#ffffff07 0 3px,transparent 3px 6px),repeating-linear-gradient(-45deg,#00000060 0 3px,transparent 3px 6px),linear-gradient(160deg,#27272a,#09090b)}
.bk-carbon .sback__logo{color:#ef4444;text-shadow:0 0 18px #dc2626}
.bk-jade :is(.sback,.slot__back){background:repeating-linear-gradient(115deg,#ffffff12 0 2px,transparent 2px 23px),repeating-linear-gradient(40deg,#00000018 0 1px,transparent 1px 31px),linear-gradient(135deg,#022c22,#047857 30%,#6ee7b7 50%,#059669 68%,#022c22)}
.bk-gold :is(.sback,.slot__back){border-color:#fde68a;background:linear-gradient(115deg,#78350f,#f59e0b 20%,#fde68a 35%,#b45309 50%,#fbbf24 70%,#fff7c2 82%,#78350f);background-size:250% 250%;animation:shift 6s ease infinite}
.bk-gold .sback__logo{color:#451a03;text-shadow:0 1px 0 #fff8}
.bk-gold .sback small{color:#451a03b0}
.bk-galaxy :is(.sback,.slot__back){animation:twinkle 3s ease-in-out infinite;background:
  radial-gradient(1.2px 1.2px at 20% 25%,#fff,transparent),radial-gradient(1px 1px at 70% 18%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 70%,#fff,transparent),
  radial-gradient(1px 1px at 85% 55%,#fff,transparent),radial-gradient(1.2px 1.2px at 12% 82%,#fff,transparent),radial-gradient(1px 1px at 60% 88%,#fff,transparent),
  radial-gradient(circle at 30% 35%,#7c3aed99,transparent 45%),radial-gradient(circle at 72% 70%,#db277799,transparent 45%),#0b1026}
.bk-matrix :is(.sback,.slot__back){border-color:#22c55e;background:repeating-linear-gradient(90deg,#00ff6618 0 1px,transparent 1px 9px),repeating-linear-gradient(180deg,#00ff6655 0 2px,transparent 2px 7px),#020a04;
  background-size:auto,9px 120px;animation:matrixFall 2.5s linear infinite}
@keyframes matrixFall{to{background-position:0 0,0 120px}}
.bk-matrix .sback__logo{color:#4ade80;text-shadow:0 0 14px #22c55e;font-family:'JetBrains Mono',monospace}
.bk-holo :is(.sback,.slot__back){background:conic-gradient(from 0deg at 50% 50%,#ff4d4d,#fbbf24,#4ade80,#38bdf8,#a78bfa,#f472b6,#ff4d4d);animation:hue 4s linear infinite}

/* ---------- phông nền màn mở pack ---------- */
.sbg-sunset{background:radial-gradient(ellipse at 50% 110%,#fb923c 0%,#db2777 30%,#4c1d95 65%,#0f0a1e 100%)}
.sbg-forest{background:radial-gradient(2px 2px at 20% 30%,#bef264,transparent),radial-gradient(2.5px 2.5px at 72% 22%,#d9f99d,transparent),radial-gradient(2px 2px at 40% 72%,#bef264,transparent),
  radial-gradient(1.5px 1.5px at 86% 62%,#ecfccb,transparent),radial-gradient(2px 2px at 10% 80%,#bef264,transparent),radial-gradient(2px 2px at 58% 45%,#d9f99d,transparent),
  radial-gradient(ellipse at 50% 100%,#166534,#052e16 60%,#020a05)}
.sbg-ocean{background:repeating-linear-gradient(100deg,#ffffff07 0 30px,transparent 30px 90px),radial-gradient(ellipse at 50% 0%,#0ea5e9 0%,#0c4a6e 40%,#020617 85%)}
.sbg-tet{background:radial-gradient(circle,#fde68a44 1.5px,transparent 2px) 0 0/30px 30px,radial-gradient(ellipse at 50% 40%,#dc2626,#7f1d1d 55%,#2a0505)}
.sbg-cyber{background:linear-gradient(#ff00ff22 1px,transparent 1px) 0 0/100% 40px,linear-gradient(90deg,#00ffff22 1px,transparent 1px) 0 0/40px 100%,radial-gradient(ellipse at 50% 100%,#7e22ce,#0b0217 60%)}
.sbg-space{background:radial-gradient(1.5px 1.5px at 15% 20%,#fff,transparent),radial-gradient(1px 1px at 35% 65%,#fff,transparent),radial-gradient(1.5px 1.5px at 62% 30%,#fff,transparent),
  radial-gradient(1px 1px at 80% 75%,#fff,transparent),radial-gradient(1px 1px at 90% 15%,#fff,transparent),radial-gradient(1.2px 1.2px at 50% 90%,#fff,transparent),
  radial-gradient(circle at 30% 30%,#4338ca66,transparent 40%),radial-gradient(circle at 75% 65%,#be185d55,transparent 40%),#02010a}

.foot{text-align:center;color:var(--muted);font-size:12px;padding:30px 16px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}