/* POKEHUNT: night black, Pokéball red, yellow. */
:root{
  --navy:#07070a;--navy2:#101014;--navy3:#18181e;--ink:#f6f3ee;--ink2:#c3c0b8;--ink3:#8a877f;--red:#e3350d;--yellow:#ffcb05;
  --orange:#e3350d;--orange2:#ff5a3c;--orange3:#a8260a;--gold:#ffcb05;--green:#58d38b;
  --line:#ffffff14;--line2:#ffffff22;
  --sans:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --r:18px;--r2:12px;
}
*{box-sizing:border-box}
html{scrollbar-color:#2a2a32 var(--navy);scrollbar-width:thin}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--navy)}
*::-webkit-scrollbar-thumb{background:#2a2a32;border-radius:99px;border:2px solid var(--navy)}
*::-webkit-scrollbar-thumb:hover{background:var(--orange3)}
html,body{margin:0;padding:0;background:var(--navy);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body{min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;pointer-events:none}
.nav>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.04em;font-size:15px}
.brand img{width:30px;height:30px;object-fit:contain}
.nav-links{display:flex;gap:6px;align-items:center;background:#07070a99;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;padding:5px}
.nav-links a,.nav-links button{padding:8px 14px;border-radius:999px;font-size:14px;color:var(--ink2);transition:background .2s,color .2s}
.nav-links a:hover,.nav-links button:hover{background:#ffffff10;color:var(--ink)}
.nav-links a.on{background:#ffffff14;color:var(--ink)}
.nav-links .cta{background:var(--red);color:#fff;font-weight:700}
.nav-links .cta:hover{background:var(--orange2);color:#fff}
.wallet-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.wallet-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
@media(max-width:720px){.nav{padding:10px 12px}.nav-links a:not(.cta):not(.keep){display:none}.brand span{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:999px;font-weight:700;font-size:15px;transition:transform .15s,background .2s,box-shadow .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-orange{background:var(--red);color:#fff;box-shadow:0 10px 30px -10px #e3350d99}
.btn-orange:hover{background:var(--orange2)}
.btn-ghost{background:#ffffff10;border:1px solid var(--line2);color:var(--ink)}
.btn-ghost:hover{background:#ffffff18}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn.sm{padding:9px 14px;font-size:13.5px}

/* layout */
.wrap{width:min(1120px,calc(100% - 40px));margin:0 auto}
.section{padding:96px 0}
.section h2{font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.02em;margin:0 0 10px;text-align:center}
.section .lead{color:var(--ink2);font-size:17px;text-align:center;max-width:620px;margin:0 auto 42px;line-height:1.5}
.card{background:linear-gradient(180deg,#141418,#0e0e12);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#1c1c22;border:1px solid var(--line2);color:var(--ink);padding:12px 18px;border-radius:999px;font-size:14px;opacity:0;transition:opacity .25s,transform .25s;z-index:200;pointer-events:none;box-shadow:0 20px 50px -20px #000}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* tier colours */
.t-A{--tc:#8a96a8}.t-B{--tc:#58d38b}.t-C{--tc:#4fa9ff}.t-D{--tc:#b47cff}.t-E{--tc:#ff5a3c}.t-F{--tc:#ffcb05}.t-G{--tc:#ffffff}
.tier-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:color-mix(in srgb,var(--tc) 18%,transparent);color:var(--tc);border:1px solid color-mix(in srgb,var(--tc) 40%,transparent)}

/* a real card: image with holo sheen on the big ones */
.pcard{position:relative;aspect-ratio:591/1000;border-radius:4.5%/3.3%;overflow:hidden;background:#0a0f1a;box-shadow:0 20px 50px -20px #000,0 0 0 1px #ffffff12}
.pcard img{width:100%;height:100%;object-fit:cover}
.pcard.holo::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ffffff2e 45%,#ff6a2b22 50%,#4fa9ff22 55%,transparent 70%);background-size:250% 250%;animation:holo 3.2s linear infinite;mix-blend-mode:screen;pointer-events:none}
@keyframes holo{0%{background-position:0% 50%}100%{background-position:100% 50%}}

/* pull rows */
.pull{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.pull:last-child{border-bottom:0}
.pull .fan{display:flex}
.pull .fan .pcard{width:44px;margin-right:-14px;transform:rotate(-6deg)}
.pull .fan .pcard:nth-child(2){transform:rotate(0);z-index:1}
.pull .fan .pcard:nth-child(3){transform:rotate(6deg);margin-right:0}
.pull .who{font-size:15px}
.pull .who small{display:block;color:var(--ink3);font-size:13px;margin-top:2px}
.pull .usd{font-family:var(--mono);font-size:16px;color:var(--ink)}
.empty{color:var(--ink3);text-align:center;padding:36px 0;font-size:15px}

footer{padding:40px 0 60px;color:var(--ink3);font-size:13.5px;border-top:1px solid var(--line);margin-top:40px}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between}
footer a{color:var(--ink2)}footer a:hover{color:var(--ink)}

/* 3D tilt on hover: the card follows the pointer, a glare slides across it, its shadow moves the other way */
.tilt{transform-style:preserve-3d;transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:box-shadow .3s;will-change:transform;box-shadow:calc(var(--shx,0) * 1px) calc(var(--shy,20) * 1px) 50px -20px #000,0 0 0 1px #ffffff12}
.tilt::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;background:linear-gradient(var(--ga,115deg),transparent 35%,#ffffff 50%,transparent 65%);opacity:calc(var(--glare,0) * .35);mix-blend-mode:screen;transition:opacity .25s}
.tilt.on{box-shadow:calc(var(--shx,0) * 1px) calc(var(--shy,20) * 1px) 60px -18px #000,0 0 0 1px #ffffff2a,0 0 40px -10px color-mix(in srgb,var(--tc,#4fa9ff) 45%,transparent)}
/* leaving for the map: content falls away, the globe is lifted above it and animated in app.js */
/* into the map: the page holds still, the map frame opens as a circle from the pin and swallows the page */
body.warping main{animation:holdDim .9s ease forwards}
@keyframes holdDim{to{filter:brightness(.55)}}
body.map-open{overflow:hidden}
#mapFrame{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:550;opacity:0;pointer-events:none;background:#07070a}
#mapFrame.reveal{opacity:1;clip-path:circle(var(--rr,0px) at var(--rx,50%) var(--ry,50%));transition:clip-path 1.6s cubic-bezier(.6,0,.2,1)}

#revealRing{position:fixed;left:var(--rx);top:var(--ry);width:calc(var(--rr,0px) * 2);height:calc(var(--rr,0px) * 2);transform:translate(-50%,-50%);border-radius:50%;border:3px solid var(--red);box-shadow:0 0 40px 6px #e3350daa,inset 0 0 40px 6px #e3350d66;z-index:551;pointer-events:none;transition:width 1.6s cubic-bezier(.6,0,.2,1),height 1.6s cubic-bezier(.6,0,.2,1),opacity .4s 1.3s;opacity:1}
#revealRing.done{opacity:0}