/* ===================== COSMODEX — visual system ======================
 * Dark, cinematic, restrained. Blue-tinted base (not pure black); accents
 * reserved so gold/rainbow read as "rare". Mobile-first. */

:root{
  --bg:#05060d; --bg2:#0a0d1c; --panel:#11152b; --panel2:#171c38;
  --ink:#eef1ff; --muted:#8b93b8; --line:#222845;
  --accent:#7aa2ff; --accent2:#b89bff;
  /* rarity */
  --c-Common:#9aa4b2; --c-Uncommon:#3fd17a; --c-Rare:#3aa0ff;
  --c-Epic:#b06bff; --c-Legendary:#ffb43a; --c-Mythic:#ff5e8a;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --nav-h:62px;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  background:var(--bg); color:var(--ink); overflow:hidden;
  -webkit-font-smoothing:antialiased; user-select:none;
}
.hidden{display:none !important;}
.muted{color:var(--muted);}
b{font-weight:700;}

/* animated starfield backdrop */
#stars-bg{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(1100px 700px at 70% -10%, #131a3a 0%, transparent 60%),
    radial-gradient(900px 600px at 10% 110%, #1a1233 0%, transparent 55%),
    linear-gradient(180deg,#06070f 0%, #04050b 100%);
}
#stars-bg::after{
  content:""; position:absolute; inset:-50%;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, #fff 50%, transparent),
    radial-gradient(1.2px 1.2px at 60% 70%, #cfe0ff 50%, transparent),
    radial-gradient(1px 1px at 80% 20%, #fff 50%, transparent),
    radial-gradient(1.3px 1.3px at 35% 85%, #fff 50%, transparent),
    radial-gradient(1px 1px at 90% 60%, #bcd 50%, transparent);
  background-size:280px 280px,360px 360px,240px 240px,420px 420px,300px 300px;
  opacity:.5; animation:drift 120s linear infinite;
}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(-120px,-80px)}}

/* ===================== app shell ===================== */
#app{position:fixed; inset:0; z-index:1; display:flex; flex-direction:column;}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--safe-t) + 12px) 16px 12px;
}
.brand{font-weight:800; letter-spacing:2px; font-size:18px;}
.brand span{color:var(--accent);}
.wallet{display:flex; gap:8px;}
.chip{
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:6px 11px; font-size:13px; color:var(--ink);
}
.chip b{margin-left:2px;}
#chip-dust b{color:#cdb6ff;}

.screen{flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--nav-h) + var(--safe-b) + 12px);}

/* ===================== nav ===================== */
.navbar{
  position:fixed; left:0; right:0; bottom:0; height:calc(var(--nav-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  display:flex; background:rgba(8,10,22,.86); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); z-index:5;
}
.nav-btn{
  flex:1; background:none; border:none; color:var(--muted);
  font-size:11px; font-weight:600; letter-spacing:.5px; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer;
}
.nav-btn span{font-size:19px; line-height:1;}
.nav-btn.active{color:var(--ink);}
.nav-btn.active span{filter:drop-shadow(0 0 8px var(--accent)); color:var(--accent);}

/* ===================== OPEN screen ===================== */
.open-wrap{height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:26px; padding:20px;}
.pack{
  position:relative; width:210px; height:300px; border-radius:18px; overflow:hidden;
  background:linear-gradient(155deg,#1a2350,#0c1130 55%,#160e2e);
  border:1px solid rgba(140,160,255,.25);
  box-shadow:0 24px 60px -18px rgba(60,90,220,.5), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .3s cubic-bezier(.2,.7,.3,1); cursor:pointer;
}
.pack:active{transform:scale(.97);}
.pack-foil{position:absolute; inset:0;
  background:
    conic-gradient(from 200deg at 50% 30%, #6f8cff44,#b07bff44,#ff7ab044,#6f8cff44);
  mix-blend-mode:screen; opacity:.55; animation:foil 7s linear infinite;}
@keyframes foil{to{transform:rotate(360deg)}}
.pack-glow{position:absolute; inset:0;
  background:radial-gradient(120px 160px at 50% 28%, rgba(180,200,255,.5), transparent 70%);}
.pack-label{position:absolute; left:0; right:0; top:42%; text-align:center;
  font-weight:800; letter-spacing:4px; font-size:22px; text-shadow:0 2px 20px #0008;}
.pack-sub{position:absolute; left:0; right:0; top:52%; text-align:center;
  font-size:11px; letter-spacing:2px; color:#c5cdfaaa;}
.pack::before{content:"✦"; position:absolute; left:0; right:0; bottom:22px; text-align:center;
  font-size:26px; color:#dfe6ff; opacity:.85;}

.btn-open{
  background:linear-gradient(180deg,#6f8cff,#5a6ff0); color:#fff; border:none;
  padding:15px 44px; border-radius:999px; font-size:16px; font-weight:800; letter-spacing:1px;
  box-shadow:0 12px 30px -8px rgba(90,110,240,.7); cursor:pointer;
  transition:transform .15s, box-shadow .15s;
}
.btn-open:active{transform:translateY(2px) scale(.98);}
.btn-open:disabled{filter:grayscale(.7) brightness(.7); box-shadow:none;}
.open-meta{display:flex; flex-direction:column; align-items:center; gap:4px; font-size:13px;}
#packs-line{font-weight:700;}
.pace-row{display:flex; gap:10px; margin-top:4px;}
.btn-mini{background:var(--panel); border:1px solid var(--line); color:var(--ink);
  padding:9px 16px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer;
  transition:transform .12s, opacity .12s;}
.btn-mini:active{transform:scale(.96);}
.btn-mini:disabled{opacity:.4;}

/* leaderboard */
.ranks-wrap{padding:18px 0 8px;}
.ranks-title{font-weight:800; font-size:22px; letter-spacing:.4px; padding:0 16px 14px;}
.ranks-wrap .stat-card{margin:0 16px 14px;}
.rank-rows{display:flex; flex-direction:column; gap:2px; margin-top:6px;}
.rank-line{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px;
  font-size:14px;}
.rank-line:nth-child(odd){background:#ffffff08;}
.rank-line.me{background:#1b224a; border:1px solid var(--accent);}
.rank-line .rk{width:42px; color:var(--muted); font-weight:700; font-variant-numeric:tabular-nums;}
.rank-line .rh{flex:1; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rank-line .rs{color:#cdd5ff; font-weight:700; font-variant-numeric:tabular-nums;}

/* ===================== CARD ===================== */
.card{
  --rx:0deg; --ry:0deg; --mx:50%; --my:50%;
  width:240px; aspect-ratio:63/89; perspective:900px; position:relative; cursor:pointer;
}
.card.mini{width:100%;}
.card-inner{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .12s ease-out;
}
.card.facedown .card-inner{transform:rotateY(180deg);}
.card-face{
  position:absolute; inset:0; border-radius:14px; overflow:hidden; backface-visibility:hidden;
  background:linear-gradient(180deg,#0c1024,#0a0c1c);
  border:1.5px solid var(--rc,#445);
  box-shadow:0 10px 30px -10px #000c, inset 0 0 0 1px #ffffff10,
             0 0 0 1px var(--rc,#445), 0 0 18px -4px var(--rglow,transparent);
  display:flex; flex-direction:column;
}
.card[data-rarity]{}
.card[data-rarity="Common"]{--rc:#9aa4b2; --rglow:#9aa4b260;}
.card[data-rarity="Uncommon"]{--rc:#3fd17a; --rglow:#3fd17a70;}
.card[data-rarity="Rare"]{--rc:#3aa0ff; --rglow:#3aa0ff80;}
.card[data-rarity="Epic"]{--rc:#b06bff; --rglow:#b06bff90;}
.card[data-rarity="Legendary"]{--rc:#ffb43a; --rglow:#ffb43aaa;}
.card[data-rarity="Mythic"]{--rc:#ff7aa0; --rglow:#ff5e8a;}

.art-window{position:relative; flex:0 0 60%; overflow:hidden; background:#04050c;}
.card-art{width:100%; height:100%; display:block;}
.card-art-img{width:100%; height:100%; display:block; object-fit:cover; background:#04050c;}
.art-fade{position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 60%, #0a0c1c 99%);}

.card-top{position:absolute; top:0; left:0; right:0; padding:8px 9px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:6px; z-index:3;
  background:linear-gradient(180deg,#04050cd0,transparent);}
.card-titles{min-width:0;}
.card-name{font-weight:800; font-size:14px; line-height:1.05; letter-spacing:.2px;
  text-shadow:0 1px 6px #000c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.card-desig{font-size:9px; color:#c7cdf0bb; letter-spacing:.6px; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rarity-gem{flex:none; font-size:15px; color:var(--rc); filter:drop-shadow(0 0 6px var(--rglow));}

.card-body{padding:7px 9px 4px; display:flex; flex-direction:column; gap:6px;}
.type-chip{align-self:flex-start; font-size:8.5px; font-weight:700; letter-spacing:1px;
  color:var(--rc); border:1px solid var(--rc); border-radius:5px; padding:2px 6px; opacity:.9;}
.card-stats{display:flex; flex-direction:column; gap:4px;}
.stat-row{display:flex; align-items:center; gap:6px;}
.stat-label{font-size:8px; color:var(--muted); width:30px; letter-spacing:.5px;}
.stat-track{flex:1; height:5px; background:#ffffff12; border-radius:3px; overflow:hidden;}
.stat-fill{height:100%; border-radius:3px;}
.stat-num{font-size:9px; color:var(--ink); width:22px; text-align:right;
  font-variant-numeric:tabular-nums;}
.card-foot{margin-top:auto; padding:6px 9px; display:flex; justify-content:space-between;
  align-items:center; border-top:1px solid #ffffff10;}
.foot-rarity{font-size:8.5px; font-weight:800; letter-spacing:1.5px; color:var(--rc);}
.foot-pts{font-size:10px; color:#d7deff; font-variant-numeric:tabular-nums;}

/* holo + glare, driven by --mx/--my; intensify on .active */
.holo{position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:14px;
  opacity:0; transition:opacity .2s; mix-blend-mode:color-dodge;
  background:
    repeating-linear-gradient(115deg, #ff008033 0 8%, #00e5ff33 12%, #ffe10033 18%, transparent 28%),
    radial-gradient(60% 60% at var(--mx) var(--my), #ffffff55, transparent 60%);
  background-blend-mode:overlay; background-size:300% 300%, 100% 100%;
  background-position:var(--mx) var(--my), center;}
.card[data-rarity="Rare"] .holo,.card[data-rarity="Epic"] .holo,
.card[data-rarity="Legendary"] .holo,.card[data-rarity="Mythic"] .holo{opacity:.0;}
.card.active .holo{opacity:.45;}
.card[data-rarity="Legendary"].active .holo{opacity:.6;}
.card[data-rarity="Mythic"].active .holo{opacity:.75;}
.glare{position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:14px;
  opacity:0; transition:opacity .2s; mix-blend-mode:overlay;
  background:radial-gradient(40% 40% at var(--mx) var(--my), #ffffffaa, transparent 60%);}
.card.active .glare{opacity:.5;}

/* mythic animated rainbow edge */
.card[data-rarity="Mythic"] .card-face{
  animation:mythicEdge 4s linear infinite;
}
@keyframes mythicEdge{
  0%{box-shadow:0 10px 30px -10px #000c, 0 0 22px -2px #ff5e8a;}
  33%{box-shadow:0 10px 30px -10px #000c, 0 0 22px -2px #7a9bff;}
  66%{box-shadow:0 10px 30px -10px #000c, 0 0 22px -2px #5effc8;}
  100%{box-shadow:0 10px 30px -10px #000c, 0 0 22px -2px #ff5e8a;}
}

/* card back (facedown) */
.card-back{position:absolute; inset:0; border-radius:14px; backface-visibility:hidden;
  transform:rotateY(180deg);
  background:linear-gradient(155deg,#141a3e,#0a0c20);
  border:1.5px solid #2a356a; display:flex; align-items:center; justify-content:center;}
.back-mark{font-size:54px; color:#5a6dc0; filter:drop-shadow(0 0 12px #4a5db0);
  animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{50%{opacity:.5; transform:scale(.92)}}

/* ===================== pack opening overlay ===================== */
.overlay{position:fixed; inset:0; z-index:30; background:rgba(3,4,10,.96);
  backdrop-filter:blur(6px); display:flex; flex-direction:column;
  align-items:center; justify-content:center;}
.flash{position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(circle at 50% 45%, var(--flash,#fff), transparent 60%);}
.reveal-stage{position:relative; width:min(78vw,300px); aspect-ratio:63/89;}
.reveal-stage .card{position:absolute; inset:0; width:100%;}
.reveal-hint{position:absolute; bottom:calc(var(--safe-b) + 30px); color:var(--muted);
  font-size:13px; letter-spacing:1px; animation:blink 1.6s ease-in-out infinite;}
@keyframes blink{50%{opacity:.35}}
.reveal-counter{position:absolute; top:calc(var(--safe-t) + 18px); color:var(--muted);
  font-size:13px; letter-spacing:2px;}
.new-badge{position:absolute; top:34px; left:8px; z-index:8;
  background:linear-gradient(180deg,#ffd35a,#ff9d2e); color:#3a2400;
  font-size:10px; font-weight:900; letter-spacing:1px; padding:3px 8px; border-radius:6px;
  transform:rotate(-8deg); box-shadow:0 4px 12px #ff9d2e66;}
.btn-skip{position:absolute; bottom:calc(var(--safe-b) + 26px);
  background:linear-gradient(180deg,#6f8cff,#5a6ff0); color:#fff; border:none;
  padding:14px 40px; border-radius:999px; font-weight:800; letter-spacing:1px; font-size:15px;
  box-shadow:0 12px 30px -8px rgba(90,110,240,.7);}
.reveal-card-enter{animation:cardIn .45s cubic-bezier(.2,.8,.3,1.1);}
@keyframes cardIn{from{transform:translateY(40px) scale(.8); opacity:0}}
.pop{animation:pop .5s cubic-bezier(.2,1.4,.4,1);}
@keyframes pop{0%{transform:scale(.7); opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1)}}

/* ===================== collection ===================== */
.coll-head{padding:6px 16px 10px; position:sticky; top:0; z-index:4;
  background:linear-gradient(180deg,#05060df2,#05060dcc); backdrop-filter:blur(8px);}
.coll-title{font-weight:800; font-size:20px; letter-spacing:.5px; margin-bottom:8px;}
.coll-progress{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.bar{flex:1; height:8px; background:#ffffff14; border-radius:5px; overflow:hidden;}
.bar-fill{height:100%; width:0;
  background:linear-gradient(90deg,#5a6ff0,#b89bff,#ffb43a); transition:width .6s;}
.coll-pct{font-size:13px; font-weight:700; color:#cdd5ff; font-variant-numeric:tabular-nums;}
.filters{display:flex; gap:7px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none;}
.filters::-webkit-scrollbar{display:none;}
.filt{flex:none; font-size:12px; padding:6px 12px; border-radius:999px;
  background:var(--panel); border:1px solid var(--line); color:var(--muted); cursor:pointer;}
.filt.on{background:#1b224a; color:#fff; border-color:var(--accent);}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:11px; padding:12px 16px;}
@media(min-width:520px){.grid{grid-template-columns:repeat(4,1fr);}}
.cell{position:relative; aspect-ratio:63/89; border-radius:11px; overflow:hidden; cursor:pointer;}
.cell.owned{border:1px solid var(--cell-rc,#334);}
.cell .card{width:100%;}
.cell-locked{position:absolute; inset:0; background:#0a0c1a;
  border:1px solid #1a2038; border-radius:11px; display:flex; align-items:center;
  justify-content:center; color:#2c3556; font-size:30px;}
.cell-locked small{position:absolute; bottom:8px; font-size:8px; color:#3a456e;
  letter-spacing:.5px; text-align:center; width:100%; text-transform:uppercase;}
.cell-new{position:absolute; top:5px; right:5px; z-index:6; width:8px; height:8px;
  border-radius:50%; background:#ffd35a; box-shadow:0 0 8px #ffd35a;}
.cnt{position:absolute; bottom:5px; right:6px; z-index:6; font-size:9px; font-weight:800;
  color:#fff; background:#000a; border-radius:5px; padding:1px 5px;}

/* ===================== stats ===================== */
.stats-wrap{padding:18px 16px; display:flex; flex-direction:column; gap:14px;}
.stat-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px;}
.stat-big{font-size:34px; font-weight:800; letter-spacing:.5px;}
.stat-cap{font-size:12px; color:var(--muted); letter-spacing:1px; text-transform:uppercase;}
.tier-rows{display:flex; flex-direction:column; gap:9px; margin-top:6px;}
.tier-line{display:flex; align-items:center; gap:10px; font-size:13px;}
.tier-dot{width:11px; height:11px; border-radius:3px;}
.tier-name{width:78px; font-weight:600;}
.tier-bar{flex:1; height:7px; background:#ffffff10; border-radius:4px; overflow:hidden;}
.tier-bar i{display:block; height:100%; border-radius:4px;}
.tier-cnt{width:54px; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums;}
.soon{text-align:center; color:var(--muted); font-size:13px; padding:8px;
  border:1px dashed var(--line); border-radius:12px;}

/* ===================== detail overlay ===================== */
#detail{padding:calc(var(--safe-t) + 10px) 18px calc(var(--safe-b) + 18px);
  justify-content:flex-start; gap:18px; overflow-y:auto;}
.detail-close{position:absolute; top:calc(var(--safe-t) + 12px); right:16px; z-index:9;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:var(--panel); color:#fff; font-size:16px;}
.detail-card-holder{margin-top:30px; width:min(80vw,320px); aspect-ratio:63/89; position:relative;}
.detail-card-holder .card{width:100%;}
.detail-info{width:100%; max-width:420px; display:flex; flex-direction:column; gap:12px;}
.di-fact{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; font-size:14px; line-height:1.5; color:#dde3ff;}
.di-fact b{color:#fff;}
.di-rows{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.di-row{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:9px 11px;}
.di-row .k{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;}
.di-row .v{font-size:14px; font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums;}
.di-credit{font-size:10px; color:var(--muted); text-align:center; line-height:1.5;}
.btn-share{position:sticky; bottom:0; align-self:center;
  background:linear-gradient(180deg,#b89bff,#8e6bff); color:#fff; border:none;
  padding:13px 30px; border-radius:999px; font-weight:800; letter-spacing:.5px; font-size:15px;
  box-shadow:0 10px 26px -8px #8e6bffaa;}

/* ===================== splash ===================== */
#splash{position:fixed; inset:0; z-index:50; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  transition:opacity .5s;}
#splash.gone{opacity:0; pointer-events:none;}
.splash-logo{font-size:34px; font-weight:800; letter-spacing:4px;}
.splash-logo span{color:var(--accent);}
.splash-tag{color:var(--muted); letter-spacing:3px; font-size:13px;}
.splash-load{margin-top:24px; color:#48507a; font-size:12px; letter-spacing:1px;}

.toast{position:fixed; left:50%; bottom:calc(var(--nav-h) + var(--safe-b) + 16px);
  transform:translateX(-50%); z-index:40; background:#1a2046; border:1px solid var(--line);
  color:#fff; padding:11px 18px; border-radius:999px; font-size:13px; font-weight:600;
  box-shadow:0 10px 30px -8px #000a; animation:toastIn .3s, toastOut .3s 2.2s forwards;}
@keyframes toastIn{from{opacity:0; transform:translate(-50%,12px)}}
@keyframes toastOut{to{opacity:0; transform:translate(-50%,12px)}}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important;}
}