:root{
  --bg:#070512; --bg2:#0d0820; --panel:rgba(20,12,44,.55); --panel2:rgba(26,16,56,.8);
  --text:#ede6ff; --muted:#9d8fce; --line:rgba(150,110,255,.28);
  --purple:#a855f7; --pink:#ec4899; --blue:#3b82f6; --cyan:#22d3ee; --gold:#fbbf24;
  --holo1:#ff5fd0; --holo2:#5fe0ff; --holo3:#b06bff; --holo4:#a6ff8f;
  --rc:#9d8fce; /* rarity color, set per-card */
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; } html,body{ min-height:100%; }
body{ font-family:'Space Grotesk',system-ui,sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; }
b{ font-weight:700; }
.hidden{ display:none !important; }

/* fx background */
.fx{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
#stars{ position:absolute; inset:0; }
.grid-fx{ position:absolute; inset:-50% 0 0; background-image:linear-gradient(rgba(120,80,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(120,80,255,.12) 1px,transparent 1px);
  background-size:44px 44px; transform:perspective(400px) rotateX(60deg); transform-origin:top; animation:gridmove 8s linear infinite; opacity:.5; }
@keyframes gridmove{ from{ background-position:0 0 } to{ background-position:0 44px } }
.orb{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.4; mix-blend-mode:screen; animation:drift 24s ease-in-out infinite; }
.o1{ width:440px;height:440px; background:#8b3bff; top:-8%; left:-6%; }
.o2{ width:400px;height:400px; background:#ec4899; bottom:-10%; right:-6%; animation-delay:-9s; }
.o3{ width:340px;height:340px; background:#22d3ee; top:44%; left:58%; animation-delay:-15s; }
@keyframes drift{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(40px,-30px) scale(1.14) } }

/* loader */
#loader{ position:fixed; inset:0; z-index:120; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:radial-gradient(700px 500px at 50% 40%,#150a30,#070512); transition:opacity .7s,visibility .7s; }
#loader.gone{ opacity:0; visibility:hidden; }
.ldr-mascot{ width:110px; height:110px; border-radius:50%; overflow:hidden; border:2px solid var(--line); box-shadow:0 0 40px var(--purple); animation:spin 3s linear infinite; background:#000; }
.ldr-mascot img{ width:100%; height:100%; object-fit:contain; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.ldr-text{ font-family:'Orbitron'; font-size:12px; letter-spacing:3px; color:var(--muted); }

/* topbar */
.topbar{ position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; padding:12px 16px; backdrop-filter:blur(12px); background:rgba(7,5,18,.6); border-bottom:1px solid var(--line); }
.logo{ display:flex; align-items:center; gap:9px; cursor:pointer; }
.logo-img{ width:32px; height:32px; border-radius:9px; object-fit:contain; background:#000; border:1px solid var(--line); }
.logo span{ font-family:'Orbitron'; font-weight:700; font-size:15px; letter-spacing:1px; }
.logo b{ background:linear-gradient(90deg,var(--holo2),var(--holo1)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.navlink{ background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:12px; padding:8px 12px; font-family:inherit; font-weight:600; font-size:13px; cursor:pointer; }

#app{ position:relative; z-index:1; max-width:520px; margin:0 auto; padding:20px 16px 60px; }
.view{ display:none; animation:viewIn .4s ease; } .view.on{ display:block; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* landing */
.hero{ text-align:center; padding:24px 6px; }
.hero-mascot{ position:relative; width:180px; height:180px; margin:0 auto 20px; }
.hm-ring{ position:absolute; inset:-10px; border-radius:50%; border:2px solid transparent;
  background:conic-gradient(from 0deg,var(--holo1),var(--holo2),var(--holo3),var(--holo4),var(--holo1)) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:spin 6s linear infinite; }
.hm-img{ width:180px; height:180px; border-radius:50%; object-fit:contain; background:#000; box-shadow:0 0 60px -8px var(--purple); }
.hero-tag{ font-family:'Orbitron'; font-size:10.5px; letter-spacing:3px; color:var(--holo2); margin-bottom:14px; }
.hero h1{ font-family:'Orbitron'; font-weight:800; font-size:clamp(26px,6.5vw,40px); line-height:1.18; letter-spacing:-.5px; text-shadow:0 0 30px rgba(168,85,247,.4); }
.hero h1 .uni{ -webkit-text-fill-color:initial; }
.hero-sub{ color:var(--muted); font-size:clamp(15px,3vw,18px); max-width:400px; margin:14px auto 26px; }
.cta{ font-family:'Orbitron'; font-weight:700; font-size:15px; letter-spacing:.5px; color:#fff; cursor:pointer; border:none; border-radius:16px; padding:16px 26px;
  background:linear-gradient(135deg,var(--holo2),var(--holo3) 55%,var(--holo1)); box-shadow:0 12px 34px -8px var(--holo3),0 0 0 1px rgba(255,255,255,.15) inset;
  animation:ctaGlow 3s ease-in-out infinite; transition:transform .1s; }
.cta:hover{ transform:translateY(-2px) scale(1.02); } .cta:active{ transform:scale(.97); } .cta.full{ width:100%; margin-top:18px; }
@keyframes ctaGlow{ 0%,100%{ box-shadow:0 12px 30px -10px var(--holo3) } 50%{ box-shadow:0 14px 44px -6px var(--holo1) } }
.hero-stats{ display:inline-flex; align-items:center; gap:20px; margin-top:28px; padding:12px 22px; background:var(--panel); border:1px solid var(--line); border-radius:16px; }
.hero-stats b{ display:block; font-family:'Orbitron'; font-size:20px; } .hero-stats span{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
.hdiv{ width:1px; height:28px; background:var(--line); }

/* wizard */
.steps-head{ display:flex; align-items:center; justify-content:center; gap:6px; margin:6px 0 18px; }
.steps-head .dot{ width:30px; height:30px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; font-family:'Orbitron'; font-size:12px; color:var(--muted); background:var(--panel); }
.steps-head .dot.on{ border-color:var(--holo2); color:#fff; box-shadow:0 0 14px -2px var(--holo2); }
.steps-head i{ width:26px; height:2px; background:var(--line); }
.glass{ background:var(--panel2); backdrop-filter:blur(18px); border:1px solid var(--line); border-radius:22px; box-shadow:0 24px 60px -20px #000; }
.wizard{ padding:24px; }
.step{ display:none; } .step.on{ display:block; animation:viewIn .3s ease; }
.step h2{ font-family:'Orbitron'; font-size:20px; margin-bottom:4px; }
.wsub{ color:var(--muted); font-size:13.5px; margin-bottom:16px; }
.step label{ display:block; font-size:12px; font-weight:600; color:var(--muted); margin:14px 0 6px; text-transform:uppercase; letter-spacing:.5px; }
.in,.xinput{ width:100%; background:rgba(8,5,20,.7); border:1px solid var(--line); border-radius:12px; color:var(--text); font-family:inherit; font-size:16px; }
.in{ padding:12px 14px; } .in:focus{ outline:none; border-color:var(--holo2); box-shadow:0 0 0 3px rgba(34,211,238,.15); }
.xinput{ display:flex; align-items:center; padding:0 14px; } .xinput span{ color:var(--muted); font-weight:700; } .xinput input{ flex:1; background:none; border:none; outline:none; color:var(--text); font-family:inherit; font-size:16px; padding:12px 8px; }
.xinput:focus-within{ border-color:var(--holo2); }
.frow2{ display:flex; gap:10px; } .frow2>div{ flex:1; min-width:0; }
.frow2 input[type=date]{ color-scheme:dark; }
.field-note{ font-size:11.5px; color:var(--muted); margin-top:8px; }
.cwrap{ position:relative; }
.cdrop{ position:absolute; top:50px; left:0; right:0; max-height:190px; overflow-y:auto; background:var(--panel2); backdrop-filter:blur(18px); border:1px solid var(--line); border-radius:12px; z-index:6; display:none; }
.cdrop.on{ display:block; } .cdrop div{ padding:10px 14px; cursor:pointer; font-size:14px; } .cdrop div:hover{ background:rgba(168,85,247,.3); }
.verify-msg{ background:rgba(8,5,20,.8); border:1px dashed var(--holo3); border-radius:14px; padding:16px; font-size:15px; line-height:1.5; color:#fff; }
.v-actions{ display:flex; gap:10px; margin-top:12px; }
.btn{ flex:1; text-align:center; border:none; border-radius:12px; padding:12px; font-family:inherit; font-weight:700; font-size:14px; cursor:pointer; text-decoration:none; display:inline-block; }
.btn.primary{ background:linear-gradient(135deg,var(--holo2),var(--holo3)); color:#fff; }
.btn.ghost{ background:var(--panel); border:1px solid var(--line); color:var(--text); }
.v-hint{ color:var(--muted); font-size:12.5px; margin-top:14px; text-align:center; }
#verifyHint{ margin-top:12px; font-weight:600; } #verifyHint.err{ color:#ff8095; } #verifyHint.ok{ color:var(--holo4); }
.link-back{ display:block; margin:16px auto 0; background:none; border:none; color:var(--muted); font-family:inherit; font-weight:600; font-size:14px; cursor:pointer; }

/* ── PASSPORT CARD ── */
.minted-banner{ font-family:'Orbitron'; text-align:center; font-size:13px; letter-spacing:3px; color:var(--holo4); margin-bottom:14px; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.7 } 50%{ opacity:1 } }
.pp-holder{ perspective:1200px; display:flex; justify-content:center; }
.passport-card{ width:100%; max-width:380px; border-radius:24px; padding:2px; position:relative; transform-style:preserve-3d; transition:transform .1s ease-out;
  background:linear-gradient(135deg, var(--rc), transparent 40%, transparent 60%, var(--rc)); box-shadow:0 30px 70px -24px #000, 0 0 44px -10px var(--rc); }
.pc-inner{ position:relative; border-radius:22px; overflow:hidden; background:linear-gradient(160deg,#140a2e,#0a0618); padding:18px; }
/* holo sheen */
.pc-holo{ position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:color-dodge; opacity:.4;
  background:linear-gradient(115deg,transparent 20%,rgba(255,95,208,.5),rgba(95,224,255,.5),rgba(166,255,143,.4),transparent 80%); background-size:250% 250%; animation:holo 5s linear infinite; }
@keyframes holo{ 0%{ background-position:0% 0% } 100%{ background-position:250% 250% } }
.pc-glare{ position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; background:radial-gradient(circle at var(--gx,50%) var(--gy,30%), rgba(255,255,255,.35), transparent 40%); }
.pc-top{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.pc-brand{ font-family:'Orbitron'; font-weight:800; font-size:13px; letter-spacing:2px; }
.pc-brand small{ display:block; font-size:8px; letter-spacing:3px; color:var(--muted); font-weight:600; }
.pc-logo{ width:22px; height:22px; border-radius:6px; object-fit:contain; background:#000; vertical-align:-5px; margin-right:6px; border:1px solid var(--line); }
.pc-rarity{ font-family:'Orbitron'; font-size:10px; font-weight:700; letter-spacing:1px; padding:4px 10px; border-radius:20px; border:1px solid var(--rc); color:var(--rc); text-transform:uppercase; }
.pc-mid{ display:flex; gap:14px; margin:16px 0; position:relative; z-index:2; }
.pc-avatar{ width:104px; height:104px; flex:0 0 104px; border-radius:16px; overflow:hidden; background:#000; border:1px solid var(--line); box-shadow:0 0 24px -6px var(--rc); }
.pc-avatar img{ width:100%; height:100%; object-fit:contain; }
.pc-fields{ flex:1; min-width:0; }
.pc-field{ margin-bottom:9px; } .pc-field .k{ font-size:9px; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); } .pc-field .val{ font-weight:700; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc-field .val.id{ font-family:'Orbitron'; color:var(--holo2); font-size:14px; }
.pc-class{ text-align:center; padding:10px; border-radius:14px; background:rgba(168,85,247,.14); border:1px solid var(--line); margin-bottom:12px; position:relative; z-index:2; }
.pc-class .k{ font-size:9px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; } .pc-class .cls{ font-family:'Orbitron'; font-weight:700; font-size:17px; margin-top:2px; }
.pc-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; position:relative; z-index:2; }
.pc-badge{ font-size:11px; font-weight:700; padding:5px 9px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid var(--line); }
.pc-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:12px; position:relative; z-index:2; }
.pc-stats .ps{ background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:10px; padding:7px 4px; text-align:center; }
.pc-stats .ps b{ display:block; font-family:'Orbitron'; font-size:15px; font-weight:700; } .pc-stats .ps span{ font-size:8.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.pc-stats .ps.hl{ background:linear-gradient(160deg,rgba(34,211,238,.18),rgba(168,85,247,.12)); border-color:var(--holo2); }
.pc-stats .ps.hl b{ color:var(--holo2); }
.pc-bottom{ display:flex; align-items:flex-end; justify-content:space-between; position:relative; z-index:2; }
.pc-meta{ font-size:10px; color:var(--muted); line-height:1.7; } .pc-meta b{ color:var(--text); }
.pc-qr{ width:64px; height:64px; background:#fff; border-radius:10px; padding:5px; }
.pc-qr img,.pc-qr canvas{ width:100%!important; height:100%!important; }
.pc-status-strip{ margin-top:12px; text-align:center; font-family:'Orbitron'; font-size:10px; letter-spacing:2px; color:var(--rc); position:relative; z-index:2; padding-top:10px; border-top:1px solid var(--line); }

/* verification stamp */
.pc-flash{ position:absolute; inset:0; z-index:9; background:#a6ff8f; opacity:0; pointer-events:none; border-radius:22px; }
.pc-flash.go{ animation:ppflash .5s ease; } @keyframes ppflash{ 0%{opacity:0} 12%{opacity:.45} 100%{opacity:0} }
/* the stamp is a permanent faint watermark; on a fresh mint it slams in first */
.stamp{ position:absolute; z-index:10; top:48%; left:50%; width:170px; height:170px; border-radius:50%; pointer-events:none;
  border:5px solid #a6ff8f; box-shadow:0 0 0 3px #a6ff8f inset; color:#a6ff8f;
  display:flex; align-items:center; justify-content:center; text-align:center; font-family:'Orbitron'; text-transform:uppercase;
  transform:translate(-50%,-50%) rotate(-16deg) scale(1); opacity:.12; mix-blend-mode:screen; filter:saturate(1.2); }
.stamp .s-ring{ position:absolute; inset:8px; border-radius:50%; border:2px dashed #a6ff8f; opacity:.6; }
.stamp .s-in{ display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1; }
.stamp .s-uni{ font-size:30px; } .stamp b{ font-size:24px; letter-spacing:2px; } .stamp i{ font-size:9px; letter-spacing:3px; font-style:normal; opacity:.9; }
.stamp.go{ animation:stampSlam 1.9s ease both; }
@keyframes stampSlam{
  0%{ transform:translate(-50%,-50%) rotate(-34deg) scale(3.2); opacity:0; filter:blur(5px) }
  16%{ transform:translate(-50%,-50%) rotate(-16deg) scale(.86); opacity:1; filter:blur(0) }
  23%{ transform:translate(-50%,-50%) rotate(-16deg) scale(1.1); opacity:1 }
  30%{ transform:translate(-50%,-50%) rotate(-16deg) scale(1); opacity:1 }
  70%{ transform:translate(-50%,-50%) rotate(-16deg) scale(1); opacity:1 }
  100%{ transform:translate(-50%,-50%) rotate(-16deg) scale(1); opacity:.12 }   /* settle into watermark */
}
.passport-card.hit{ animation:cardHit .46s ease; }
@keyframes cardHit{ 0%,100%{ transform:none } 15%{ transform:translate(3px,-3px) rotate(.4deg) } 35%{ transform:translate(-4px,3px) rotate(-.5deg) } 55%{ transform:translate(3px,2px) } 75%{ transform:translate(-2px,-1px) } }

.pp-actions{ max-width:380px; margin:20px auto 0; display:flex; flex-direction:column; gap:10px; }
.pp-actions .btn{ padding:14px; font-size:15px; }

/* leaderboard */
.lb-title{ font-family:'Orbitron'; text-align:center; font-size:22px; margin-top:6px; }
.lb-sub{ text-align:center; color:var(--muted); font-size:13px; margin-bottom:18px; }
.lb-list{ display:flex; flex-direction:column; gap:9px; }
.lb-loading{ text-align:center; color:var(--muted); padding:20px; }
.lb-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--panel); border:1px solid var(--line); border-radius:14px; cursor:pointer; transition:.15s; }
.lb-row:hover{ border-color:var(--rc); transform:translateX(2px); }
.lb-rank{ font-family:'Orbitron'; font-weight:700; width:30px; color:var(--muted); }
.lb-av{ width:40px; height:40px; border-radius:10px; overflow:hidden; background:#000; flex:0 0 40px; } .lb-av img{ width:100%; height:100%; object-fit:contain; }
.lb-info{ flex:1; min-width:0; } .lb-name{ font-weight:700; font-size:14.5px; } .lb-name span{ color:var(--muted); font-weight:500; font-size:12px; }
.lb-sub2{ font-size:11px; color:var(--muted); }
.lb-rar{ font-family:'Orbitron'; font-size:10px; font-weight:700; padding:3px 9px; border-radius:12px; text-transform:uppercase; }

/* rarity colors */
.rar-Common{ --rc:#9aa5c0; } .rar-Rare{ --rc:#3b9dff; } .rar-Epic{ --rc:#c05bff; } .rar-Legendary{ --rc:#ffb020; } .rar-Mythic{ --rc:#ff4fd8; }
.lb-rar.rar-Common{ color:#9aa5c0; border:1px solid #9aa5c0; } .lb-rar.rar-Rare{ color:#3b9dff; border:1px solid #3b9dff; }
.lb-rar.rar-Epic{ color:#c05bff; border:1px solid #c05bff; } .lb-rar.rar-Legendary{ color:#ffb020; border:1px solid #ffb020; } .lb-rar.rar-Mythic{ color:#ff4fd8; border:1px solid #ff4fd8; }

/* share modal */
.scrim{ position:fixed; inset:0; z-index:100; background:rgba(4,2,12,.8); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:16px; }
.share-modal{ width:100%; max-width:420px; padding:20px; position:relative; text-align:center; max-height:92vh; overflow-y:auto; }
.share-modal h3{ font-family:'Orbitron'; font-size:18px; margin-bottom:12px; }
#shareCanvas{ width:100%; max-width:300px; border-radius:14px; box-shadow:0 12px 40px -12px #000; }
.share-actions{ display:flex; gap:10px; margin-top:14px; }
.x{ position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.06); color:var(--text); cursor:pointer; }

.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--panel2); border:1px solid var(--line); color:#fff; border-radius:14px; padding:11px 18px; font-weight:700; font-size:14px; z-index:110; opacity:0; transition:opacity .25s; box-shadow:0 0 30px -8px var(--purple); }
.toast.show{ opacity:1; }
@media(prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; } }