body{background:var(--dark);color:var(--text);font-family:"Rajdhani",sans-serif;overflow:hidden;height:100vh}

#scanlines{
  position:fixed;
  inset:0;
  z-index:9990;
  pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,.052) 3px,
    rgba(0,0,0,.052) 4px
  );
}

/* ══════════════ NAV ══════════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:9997;
  display:flex;align-items:center;gap:20px;
  padding:18px 20px 18px 16px;
  background:rgba(6,11,18,.92);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--blue-border);
}
/* Hamburger — hidden on desktop */
.nav-hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-direction:column;justify-content:center;gap:5px;z-index:2}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--blue-bright);border-radius:1px;transition:transform .25s,opacity .25s}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Compact xrp.cafe — hidden on desktop */
.btn-buy-compact{display:none}

/* Mobile nav drawer */
.mobile-nav-overlay{display:none;position:fixed;inset:0;z-index:9995;background:rgba(0,0,0,.5)}
.mobile-nav-overlay.open{display:block}
.mobile-nav{
  display:none;position:fixed;top:var(--nav-height);left:0;right:0;z-index:9996;
  flex-direction:column;padding:12px 0;
  background:rgba(6,11,18,.96);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--blue-border);
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}
.mobile-nav.open{display:flex}
.mobile-nav a{
  font-family:"Share Tech Mono",monospace;font-size:16px;letter-spacing:3px;
  color:rgba(200,216,232,.65);text-decoration:none;text-transform:uppercase;
  padding:14px 24px;transition:color .2s,background .2s;
}
.mobile-nav a:hover,.mobile-nav a:active,.mobile-nav a.active{color:var(--blue-bright);background:rgba(26,159,212,.06)}

.nav-logo{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.nav-logo-img{
  width:44px;height:44px;
  image-rendering:pixelated;border-radius:6px;
  border:2px solid var(--blue-border);
  box-shadow:0 0 16px var(--blue-glow),0 0 40px rgba(26,159,212,.15);
  animation:pulse-b 3s ease-in-out infinite;
}
@keyframes pulse-b{0%,100%{box-shadow:0 0 16px var(--blue-glow)}50%{box-shadow:0 0 32px rgba(26,159,212,.7),0 0 60px rgba(26,159,212,.2)}}
.nav-logo-text{font-family:"Press Start 2P",monospace;font-size:16px;color:#ffffff;text-shadow:none;line-height:1.1}
.nav-logo-sub{font-family:"Share Tech Mono",monospace;font-size:13px;color:rgba(255,255,255,.55);letter-spacing:3px;margin-top:4px}
.nav-links{display:flex;align-items:center;flex-shrink:1;min-width:0;margin:0 auto}
.nav-logo>div{display:flex;flex-direction:column;justify-content:center}
.nav-links a{font-family:"Share Tech Mono",monospace;font-size:15px;letter-spacing:2px;color:rgba(200,216,232,.65);text-decoration:none;text-transform:uppercase;transition:color .2s;position:relative;padding:0 clamp(6px,1.5vw,24px)}
.nav-links a:hover{color:var(--blue-bright)}
.nav-links a::before{content:"|";position:absolute;left:-1px;top:50%;transform:translateY(-50%);color:var(--blue-border);font-size:14px;pointer-events:none}
.nav-links a:first-child::before{display:none}
.nav-links::before,.nav-links::after{content:"|";color:var(--blue-border);font-size:14px}
.nav-links::before{padding:0 10px}
.nav-links::after{padding:0 10px}
.nav-right{display:flex;align-items:center;gap:16px;margin-left:auto}
.nav-xrp{font-family:"Share Tech Mono",monospace;font-size:15px;color:var(--green);display:flex;align-items:center;gap:7px;flex-shrink:1;min-width:40px}
.xaman-signin-btn,.btn-buy,.btn-buy-compact{flex-shrink:0}
.nav-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

/* XAMAN SIGN-IN BUTTON */
.xaman-signin-btn{
  display:inline-block;height:44px;padding:0 18px;
  background-color:rgb(24,35,248);border:1px solid rgb(24,35,248);border-radius:4px;
  color:#fff;font-size:16px;font-family:proxima-nova,sans-serif;line-height:24px;
  text-align:center;cursor:pointer;white-space:nowrap;outline:none;
  box-shadow:0 2px 0 rgba(0,0,0,.043);
  transition:all .3s cubic-bezier(.645,.045,.355,1);
  position:relative;overflow:hidden;
}
.xaman-signin-btn::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(255,255,255,.8);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.xaman-signin-btn:hover::after{transform:scaleX(1)}
.xaman-signin-btn:hover{background-color:rgb(64,72,255);border-color:rgb(64,72,255)}
.xaman-signin-btn:active{background-color:rgb(10,20,200);border-color:rgb(10,20,200)}
.xaman-signin-btn:disabled{opacity:.7;cursor:default}
.xaman-signin-btn .xaman-icon{display:inline-block;font-style:normal;vertical-align:-2px;line-height:0;font-size:16px}
.xaman-signin-btn .xaman-icon svg{display:inline-block;width:1em;height:1em;fill:currentColor}
.xaman-signin-btn b{font-weight:700;padding:0 8px}
.xaman-signin-btn .xaman-spinner{animation:xaman-spin 1s linear infinite}
@keyframes xaman-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.xaman-signin-btn.connected{background:rgba(0,255,136,.12);border-color:rgba(0,255,136,.3);color:var(--green)}
.xaman-signin-btn.connected:hover{background:rgba(0,255,136,.2);border-color:var(--green)}
.xaman-signin-btn.connected .xaman-icon{display:none}
.addr-short{display:none}
.btn-buy{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 18px;box-sizing:border-box;
  background-color:#006cfa;border:1px solid #006cfa;border-radius:4px;
  color:#fff;font-size:16px;font-family:proxima-nova,sans-serif;font-weight:700;line-height:24px;
  text-align:center;cursor:pointer;white-space:nowrap;outline:none;
  box-shadow:0 2px 0 rgba(0,0,0,.043);
  transition:all .3s cubic-bezier(.645,.045,.355,1);text-decoration:none;
  position:relative;overflow:hidden;
}
.btn-buy::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(255,255,255,.6);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.btn-buy:hover::after{transform:scaleX(1)}
.btn-buy:hover{background-color:#0060e0;border-color:#0060e0}
.btn-buy:active{background-color:#0050c0;border-color:#0050c0}
/* xrp.cafe mug icon + steam */
.xrpcafe-mug{position:relative;display:inline-flex;margin-right:8px;flex-shrink:0}
.xrpcafe-mug img{width:22px;height:22px;border-radius:4px}
.xrpcafe-mug::before,.xrpcafe-mug::after{content:'';position:absolute;bottom:100%;width:3px;height:6px;border-radius:50%;background:rgba(255,255,255,.7);opacity:0;pointer-events:none}
.xrpcafe-mug::before{left:5px;animation-delay:0s}
.xrpcafe-mug::after{left:12px;animation-delay:.4s}
:hover>.xrpcafe-mug::before,:hover>.xrpcafe-mug::after{opacity:1;animation:mug-steam 1s ease-out infinite}
@keyframes mug-steam{0%{transform:translateY(0) scaleX(1);opacity:.7}50%{transform:translateY(-6px) scaleX(1.5);opacity:.4}100%{transform:translateY(-12px) scaleX(.6);opacity:0}}
/* Compact xrp.cafe steam */
.btn-buy-compact{position:relative;overflow:visible}
.btn-buy-compact::before,.btn-buy-compact::after{content:'';position:absolute;bottom:100%;width:3px;height:6px;border-radius:50%;background:rgba(255,255,255,.7);opacity:0;pointer-events:none}
.btn-buy-compact::before{left:8px;animation-delay:0s}
.btn-buy-compact::after{left:18px;animation-delay:.4s}
.btn-buy-compact:hover::before,.btn-buy-compact:hover::after{opacity:1;animation:mug-steam 1s ease-out infinite}

/* ══════════════ WALLET PANEL ══════════════ */
#wallet-panel{
  position:fixed;top:68px;right:24px;z-index:9997;
  width:340px;background:var(--glass);backdrop-filter:blur(20px);
  border:1px solid var(--blue-border);border-radius:8px;
  box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 24px rgba(26,159,212,.15);
  transform:translateY(-10px) scale(.97);opacity:0;pointer-events:none;
  transition:all .25s ease;overflow:hidden;
}
#wallet-panel.open{transform:translateY(0) scale(1);opacity:1;pointer-events:all}
.wp-header{
  padding:16px 20px;border-bottom:1px solid var(--blue-border);
  display:flex;justify-content:space-between;align-items:center;
}
.wp-title{font-family:"Press Start 2P",monospace;font-size:13px;color:var(--blue-bright);display:flex;align-items:center;gap:15px}
#wp-avatar{width:33px;height:33px;border-radius:50%;border:2px solid var(--blue-border);object-fit:cover}
#wp-avatar.rl-punk-pixelated{image-rendering:pixelated;border-radius:4px}
.wp-close{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:14px;transition:color .2s}
.wp-close:hover{color:var(--blue-bright)}
.wp-address{
  padding:10px 20px;border-bottom:1px solid var(--border);
  font-family:"Share Tech Mono",monospace;font-size:12px;
  color:var(--blue-bright);letter-spacing:.5px;
  background:rgba(26,159,212,.04);text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wp-body{padding:8px 20px 12px;max-height:276px;overflow-y:auto}
.wp-body::-webkit-scrollbar{width:3px}
.wp-body::-webkit-scrollbar-thumb{background:var(--blue-border);border-radius:2px}
.wp-loading{
  text-align:center;padding:30px;
  font-family:"Share Tech Mono",monospace;font-size:14px;color:var(--text-dim);
}
.wp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wp-nft{
  position:relative;
  background:var(--panel2);border:2px solid;border-radius:5px;
  overflow:hidden;cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s;
  border-color:rgba(149,165,166,.4);box-shadow:0 2px 8px rgba(149,165,166,.1);
}
.wp-nft.tier-legendary{border-color:rgba(231,76,60,.6);box-shadow:0 2px 10px rgba(231,76,60,.25)}
.wp-nft.tier-epic{border-color:rgba(255,176,38,.6);box-shadow:0 2px 10px rgba(255,176,38,.25)}
.wp-nft.tier-rare{border-color:rgba(142,68,173,.6);box-shadow:0 2px 10px rgba(142,68,173,.25)}
.wp-nft.tier-uncommon{border-color:rgba(52,152,219,.6);box-shadow:0 2px 10px rgba(52,152,219,.25)}
.wp-nft.tier-common{border-color:rgba(39,174,96,.6);box-shadow:0 2px 10px rgba(39,174,96,.25)}
.wp-nft.tier-standard{border-color:rgba(149,165,166,.4)}
.wp-nft:hover{transform:translateY(-2px)}
.wp-nft img{width:100%;display:block;image-rendering:pixelated}
.wp-star{position:absolute;top:2px;right:4px;font-size:14px;z-index:1;text-shadow:0 1px 4px rgba(0,0,0,.7);line-height:1}
.wp-nft-id{font-family:"Share Tech Mono",monospace;font-size:12px;color:var(--blue-bright);padding:4px 5px 3px;display:flex;align-items:center;justify-content:space-between}
.wp-nft-rank{font-family:"Share Tech Mono",monospace;font-size:10px;padding:1px 4px;border:1px solid;border-radius:2px;white-space:nowrap}
.wp-nft-rank.tier-legendary{color:#E74C3C;background:rgba(231,76,60,.1);border-color:rgba(231,76,60,.3)}
.wp-nft-rank.tier-epic{color:#FFB026;background:rgba(255,176,38,.1);border-color:rgba(255,176,38,.3)}
.wp-nft-rank.tier-rare{color:#8E44AD;background:rgba(142,68,173,.1);border-color:rgba(142,68,173,.3)}
.wp-nft-rank.tier-uncommon{color:#3498DB;background:rgba(52,152,219,.1);border-color:rgba(52,152,219,.3)}
.wp-nft-rank.tier-common{color:#27AE60;background:rgba(39,174,96,.1);border-color:rgba(39,174,96,.3)}
.wp-nft-rank.tier-standard{color:#95A5A6;background:rgba(149,165,166,.08);border-color:rgba(149,165,166,.2)}
.wp-empty{
  text-align:center;padding:30px 16px;
  font-family:"Share Tech Mono",monospace;font-size:14px;color:var(--text-dim);line-height:1.8;
}
.wp-footer{
  padding:14px 20px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
}
.wp-count{font-family:"Share Tech Mono",monospace;font-size:15px;color:var(--text-dim)}
.wp-count span{color:var(--blue-bright)}
.btn-disconnect{
  font-family:"Share Tech Mono",monospace;font-size:13px;letter-spacing:2px;
  background:none;border:1px solid rgba(255,45,120,.5);color:rgba(255,45,120,.85);
  padding:6px 14px;cursor:pointer;transition:all .2s;text-transform:uppercase;
  position:relative;overflow:hidden;border-radius:4px;
}
.btn-disconnect::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--magenta);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.btn-disconnect:hover::after{transform:scaleX(1)}
.btn-disconnect:hover{border-color:var(--magenta);color:var(--magenta);background:rgba(255,45,120,.08)}

/* ══════════════ GALLERY PAGINATION ══════════════ */
.gallery-pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:24px;flex-wrap:wrap}
.gallery-pagination button{background:var(--panel2);color:var(--text);border:1px solid var(--border);padding:10px 16px;min-height:44px;font-family:"Share Tech Mono",monospace;font-size:15px;cursor:pointer;transition:all .2s}
.gallery-pagination button:hover{border-color:var(--blue);color:var(--blue-bright)}
.gallery-pagination button.active{background:var(--blue);color:var(--dark);border-color:var(--blue)}
.gallery-pagination button:disabled{opacity:.3;cursor:default}
.gallery-pagination .page-info{color:var(--text-dim);font-family:"Share Tech Mono",monospace;font-size:15px;padding:0 8px}


/* ══════════════ XAMAN QR MODAL ══════════════ */
#qr-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9995;display:none;align-items:center;justify-content:center}
#qr-overlay.open{display:flex}
#qr-modal{background:var(--panel);border:1px solid var(--blue-border);border-radius:8px;padding:32px;text-align:center;max-width:340px;position:relative}
#qr-modal img{max-width:240px;margin:16px auto;display:block;border-radius:6px}
#qr-modal .qr-status{color:var(--text-dim);font-family:"Share Tech Mono",monospace;font-size:1rem;margin-top:12px}
#qr-modal .qr-status.error{color:var(--magenta)}
#qr-modal .qr-status.success{color:var(--green)}
.xaman-qr-logo{width:48px;height:48px;margin:0 auto 14px;animation:xaman-pulse 2.4s ease-in-out infinite;filter:drop-shadow(0 0 8px rgba(26,159,212,.4))}
.xaman-qr-logo svg{width:100%;height:100%}
@keyframes xaman-pulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 8px rgba(26,159,212,.4))}50%{transform:scale(1.08);filter:drop-shadow(0 0 18px rgba(26,159,212,.7))}}
#qr-modal .qr-title{color:var(--blue-bright);font-family:"Press Start 2P",monospace;font-size:.85rem;margin-bottom:12px}
#qr-modal .qr-timer{color:var(--text-dim);font-family:"Share Tech Mono",monospace;font-size:.85rem;margin-top:8px;opacity:.6}
#qr-modal .qr-close{position:absolute;top:10px;right:14px;background:none;border:none;color:var(--text-dim);font-size:1.4rem;cursor:pointer;line-height:1;padding:4px}
#qr-modal .qr-close:hover{color:var(--text)}
#qr-modal .qr-deeplink{display:none;margin-top:14px;padding:10px 24px;background:rgba(26,159,212,.15);border:1px solid var(--blue-border);color:var(--blue-bright);font-family:"Share Tech Mono",monospace;font-size:.8rem;text-decoration:none;border-radius:6px;transition:all .2s}
#qr-modal .qr-deeplink:hover{background:rgba(26,159,212,.25);border-color:var(--blue-bright)}
#qr-modal .qr-cancel{margin-top:12px;background:transparent;border:1px solid var(--border);color:var(--text);padding:8px 20px;cursor:pointer;font-family:"Share Tech Mono",monospace;font-size:.8rem;transition:all .2s;border-radius:4px;position:relative;overflow:hidden}
#qr-modal .qr-cancel::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--magenta);transform:scaleX(0);transform-origin:left;transition:transform .4s}
#qr-modal .qr-cancel:hover::after{transform:scaleX(1)}
#qr-modal .qr-cancel:hover{border-color:var(--magenta);color:var(--magenta)}

/* ══════════════ TICKER ══════════════ */
#ticker-bar{
  position:fixed;top:var(--nav-height);left:0;right:0;z-index:9992;
  height:var(--ticker-height);
  background:rgba(26,159,212,.05);
  border-bottom:1px solid var(--blue-border);
  overflow:hidden;display:flex;align-items:center;
  padding:2px 0;
}
.ticker-track{display:flex;gap:0;align-items:center;height:100%;animation:ticker-scroll 32s linear infinite;white-space:nowrap}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick-item{font-family:"Share Tech Mono",monospace;font-size:13px;color:rgba(200,216,232,.55);padding:2px 22px;height:100%;display:inline-flex;align-items:center;gap:6px;flex-shrink:0;transform:translateY(5px)}
.tick-item span{color:var(--blue-bright)}
.tick-item.g span{color:var(--green)}
.tick-sep{color:rgba(26,159,212,.2);font-size:10px;padding:2px 2px;height:100%;flex-shrink:0;display:inline-flex;align-items:center;transform:translateY(5px)}
.tick-change{font-size:12px}
.tick-change.up{color:var(--green)}
.tick-change.down{color:var(--magenta)}

/* ══════════════ SCROLLABLE PAGE ══════════════ */
/*
  CRITICAL: #page-scroll is physically inset INSIDE the HUD boundary.
  This is the "window to space" — content is clipped by the scroll
  container's own edges. Nothing can ever appear behind the L-corners
  or HUD labels because the scroll viewport simply doesn't extend there.
*/
#page-scroll{
  position:absolute;
  top:calc(var(--header-total) + 42px);
  left:48px;
  right:48px;
  bottom:48px;
  overflow-y:auto;overflow-x:hidden;
  z-index:9991;
  background:transparent;
  scroll-behavior:smooth;
}
#page-scroll::-webkit-scrollbar{display:none}
#page-scroll{scrollbar-width:none;-ms-overflow-style:none}

/* ═══ PAGE SECTIONS ═══ */
.page-sec{
  position:relative;
  padding:30px 0;
}
#sec-stats{min-height:280px}
#sec-richlist{min-height:650px}
#sec-rarity{min-height:600px}
#sec-search{min-height:300px}
#sec-about{min-height:400px}
.sec-hero{
  min-height:calc(100vh - var(--header-total) - 138px);
  display:flex;align-items:center;justify-content:center;
  padding:0 0 30px;
}

/* Section dividers */
.sec-divider{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(26,159,212,.2) 20%,rgba(26,159,212,.2) 80%,transparent);
}
.sec-divider-purple{
  background:linear-gradient(90deg,transparent,rgba(150,50,200,.2) 20%,rgba(150,50,200,.2) 80%,transparent);
}

/* Scanline overlay — now on page-scroll */
#page-scroll::after{
  content:"";position:fixed;top:var(--header-total);left:0;right:0;bottom:0;
  background:repeating-linear-gradient(to bottom,transparent 0px,transparent 2px,rgba(26,159,212,0.018) 2px,rgba(26,159,212,0.018) 4px);
  pointer-events:none;z-index:3;
}

/* ══════════════ GLOBAL STATIC HUD ══════════════ */
#hud-frame{
  position:fixed;top:var(--header-total);left:0;right:0;bottom:0;
  z-index:9991;pointer-events:none;
}
#hud-frame .hud-c{position:absolute;width:36px;height:36px;opacity:.3}
#hud-frame .hud-c.tl{top:6px;left:12px;border-top:2px solid var(--blue);border-left:2px solid var(--blue)}
#hud-frame .hud-c.tr{top:6px;right:12px;border-top:2px solid var(--blue);border-right:2px solid var(--blue)}
#hud-frame .hud-c.bl{bottom:12px;left:12px;border-bottom:2px solid var(--blue);border-left:2px solid var(--blue)}
#hud-frame .hud-c.br{bottom:12px;right:12px;border-bottom:2px solid var(--blue);border-right:2px solid var(--blue)}
.hud-label{position:absolute;font-family:"Share Tech Mono",monospace;font-size:14px;color:rgba(26,159,212,.55);letter-spacing:2px;transition:opacity .3s}
.hud-label.tl{top:20px;left:25px}
.hud-label.tr{top:20px;right:25px;text-align:right}
.hud-label.bl{bottom:25px;left:25px}
.hud-label.br{bottom:25px;right:25px;text-align:right}

/* Progress bar */
#scroll-progress{
  position:fixed;top:0;left:0;right:0;
  height:2px;
  background:var(--blue);
  transform-origin:left;
  transform:scaleX(0);
  z-index:200;
  pointer-events:none;
}

/* ══════════════ HERO ══════════════ */
#hero{
  position:relative;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:calc(100vh - var(--header-total) - 138px);
  overflow:hidden;
}
#hero-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 30%, rgba(7,21,38,.45) 0%, rgba(6,15,30,.45) 50%, rgba(6,11,18,.45) 100%);
  z-index:0;
}
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
#hero-floor{
  position:absolute;bottom:0;left:0;right:0;height:140px;z-index:2;
  background:
    repeating-linear-gradient(90deg,rgba(26,159,212,.07) 0,rgba(26,159,212,.07) 1px,transparent 1px,transparent 44px),
    repeating-linear-gradient(0deg,rgba(26,159,212,.07) 0,rgba(26,159,212,.07) 1px,transparent 1px,transparent 44px),
    linear-gradient(180deg,transparent 0%,rgba(26,159,212,.05) 100%);
  border-top:1px solid rgba(26,159,212,.25);
}
/* ═══ BOUNCING PUNK ═══ */
#punk-wrap{
  position:absolute;
  bottom:150px;left:50%;
  z-index:15;
  transform-origin:bottom center;
}
#punk-img{
  width:86px;height:86px;
  image-rendering:pixelated;image-rendering:crisp-edges;
  filter:drop-shadow(0 0 16px rgba(255,226,52,.7)) drop-shadow(0 0 40px rgba(255,226,52,.2));
  transform-origin:bottom center;
}
#punk-shadow{
  position:absolute;
  width:60px;height:9px;
  background:radial-gradient(ellipse,rgba(255,226,52,.3) 0%,transparent 70%);
  z-index:14;border-radius:50%;
  pointer-events:none;
}
#smoke-wrap{
  position:absolute;
  width:86px;height:86px;
  z-index:13;pointer-events:none;
}
.spuff{
  position:absolute;border-radius:50%;
  pointer-events:none;mix-blend-mode:screen;
}
/* rain disabled — kept for later use
#rain{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.rdrop{position:absolute;width:2px;border-radius:1px;background:linear-gradient(180deg,transparent,rgba(26,159,212,.4))}
*/

/* hero text */
#hero-content{position:relative;z-index:10;text-align:center;margin-bottom:0;padding:0 20px}
.hero-eye{font-family:"Share Tech Mono",monospace;font-size:clamp(14px,1.5vw,18px);letter-spacing:clamp(3px,0.5vw,6px);color:rgba(64,196,255,.7);margin-bottom:18px;opacity:0}
.hero-title{font-family:"Press Start 2P",monospace;font-size:clamp(30px,5.5vw,68px);color:#fff;line-height:1.4;text-shadow:4px 4px 0 rgba(0,0,0,.6);opacity:0;margin:0;font-weight:inherit}
.hero-title .y{color:var(--yellow);text-shadow:0 0 28px var(--yellow-glow),4px 4px 0 rgba(0,0,0,.5)}
.hero-title .b{color:var(--blue-bright);text-shadow:0 0 24px var(--blue-glow),4px 4px 0 rgba(0,0,0,.5)}
.hero-sub{font-family:"Rajdhani",sans-serif;font-size:clamp(17px,2.2vw,26px);font-weight:500;letter-spacing:clamp(2px,0.4vw,5px);color:rgba(200,216,232,.75);margin-top:18px;opacity:0}
#hero-cta{position:relative;z-index:10;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:clamp(28px,3vw,44px);margin-bottom:0;padding:0 20px;opacity:0}
.btn-px{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 24px;box-sizing:border-box;border-radius:4px;
  font-size:17px;font-family:proxima-nova,sans-serif;font-weight:700;line-height:24px;
  text-align:center;cursor:pointer;white-space:nowrap;outline:none;
  box-shadow:0 2px 0 rgba(0,0,0,.043);
  transition:all .3s cubic-bezier(.645,.045,.355,1);text-decoration:none;
  position:relative;overflow:hidden;
}
.btn-px::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--blue-bright);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.btn-px:hover::after{transform:scaleX(1)}
.btn-px:hover{border-color:rgba(64,196,255,.4)}
.btn-px.primary{background-color:#006cfa;color:#fff;border:1px solid #006cfa}
.btn-px.primary::after{background:rgba(255,255,255,.6)}
.btn-px.primary:hover{background-color:#0060e0;border-color:#0060e0}
.btn-px.primary:active{background-color:#0050c0;border-color:#0050c0}
.btn-px.secondary{background-color:var(--glass);color:var(--blue-bright);border:1px solid var(--blue-border)}
.btn-px.secondary:hover{background-color:rgba(26,159,212,.15);border-color:var(--blue-bright)}
.btn-px.secondary:active{background-color:rgba(26,159,212,.25);border-color:var(--blue-bright)}




/* ══════════════ STATS ══════════════ */
#stats{background:transparent;padding:20px 0;width:100%;max-width:1100px;margin:0 auto}
.stats-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;max-width:1100px;margin:0 auto}
@media(max-width:700px){.stats-wrap{grid-template-columns:repeat(2,1fr)}}
.s-block{
  background:var(--glass);backdrop-filter:blur(12px);padding:36px 28px;text-align:center;
  border:1px solid var(--blue-border);position:relative;overflow:hidden;
  opacity:0;transform:translateY(60px) rotateX(15deg);transform-origin:center bottom;transition:border-color .3s;
}
.s-block:hover{border-color:rgba(64,196,255,.4);background:rgba(26,159,212,.08)}
.s-block::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--blue-bright);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.s-block:hover::after{transform:scaleX(1)}
.s-num{font-family:"Press Start 2P",monospace;font-size:clamp(26px,3vw,38px);color:var(--blue-bright);text-shadow:0 0 20px var(--blue-glow);display:block;margin-bottom:14px}
.s-label{font-family:"Share Tech Mono",monospace;font-size:15px;letter-spacing:3px;color:var(--text-dim);text-transform:uppercase}

/* ══════════════ SECTION HEADERS ══════════════ */
.sec-hd{text-align:center;margin-bottom:48px;opacity:0;transform:translateY(20px)}
.sec-eye{font-family:"Share Tech Mono",monospace;font-size:16px;letter-spacing:4px;color:rgba(64,196,255,.6);margin-bottom:12px;text-transform:uppercase}
.sec-title{font-family:"Press Start 2P",monospace;font-size:clamp(20px,3vw,36px);color:#fff;line-height:1.6}
.sec-title .yl{color:var(--yellow)}
.sec-title .bl{color:var(--blue-bright)}

/* ══════════════ RARITY ══════════════ */
#rarity{background:transparent;padding:20px 0;width:100%}
.rarity-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1100px;margin:0 auto}
@media(max-width:800px){.rarity-grid{grid-template-columns:1fr}}
.rarity-list{display:flex;flex-direction:column;gap:8px}
.r-item{
  display:grid;grid-template-columns:30px 56px 1fr auto auto;
  gap:12px;align-items:center;
  padding:12px 16px;background:var(--glass);backdrop-filter:blur(8px);
  border:1px solid transparent;border-radius:4px;
  transition:border-color .2s,background .2s;cursor:pointer;
  opacity:0;
}
.r-item:hover{border-color:var(--blue-border);background:rgba(26,159,212,.06)}
.r-rank{font-family:"Share Tech Mono",monospace;font-size:14px;color:var(--text-dim)}
.r-rank.gold{color:var(--yellow)}
.r-rank.silver{color:#b0bec5}
.r-rank.bronze{color:#cd7f32}
.r-thumb{width:44px;height:44px;image-rendering:pixelated;border:1px solid var(--border);border-radius:2px}
.r-name{font-family:"Share Tech Mono",monospace;font-size:15px;color:#e0eaf4}
.r-attrs{font-family:"Rajdhani",sans-serif;font-size:15px;color:var(--text-dim);margin-top:2px;line-height:1.3}
.r-bar-wrap{width:60px;height:4px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden}
.r-bar{height:100%;background:var(--blue-bright);border-radius:2px}
.r-score{font-family:"Share Tech Mono",monospace;font-size:15px;color:var(--blue-bright);min-width:42px;text-align:right}
.trait-panel{background:var(--glass);backdrop-filter:blur(12px);padding:24px;border:1px solid var(--blue-border);border-radius:4px}
.trait-title{font-family:"Press Start 2P",monospace;font-size:14px;color:var(--blue-bright);margin-bottom:20px;letter-spacing:1px}
.trait-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.trait-label{font-family:"Share Tech Mono",monospace;font-size:14px;color:var(--text-dim);width:160px;flex-shrink:0}
.trait-bar-bg{flex:1;height:6px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden}
.trait-fill{height:100%;background:var(--blue-bright);border-radius:3px;width:0;transition:width 1.2s ease}
.trait-count{font-family:"Share Tech Mono",monospace;font-size:14px;color:var(--blue-bright);width:55px;text-align:right}
.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.type-card{background:var(--panel);padding:14px;text-align:center;border:1px solid var(--blue-border);border-radius:4px}
.type-num{font-family:"Press Start 2P",monospace;font-size:16px;color:var(--blue-bright);display:block;margin-bottom:6px}
.type-name{font-family:"Share Tech Mono",monospace;font-size:13px;color:var(--text-dim);letter-spacing:2px}

/* ══════════════ GALLERY ══════════════ */
#gallery{background:transparent;padding:20px 0;width:100%}
.gallery-filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:36px}
.filter-btn{
  font-family:"Share Tech Mono",monospace;font-size:15px;letter-spacing:2px;
  color:var(--text-dim);background:var(--glass);border:1px solid var(--blue-border);
  padding:12px 22px;min-height:44px;cursor:pointer;text-transform:uppercase;transition:all .2s;
  backdrop-filter:blur(8px);
  position:relative;overflow:hidden;
}
.filter-btn::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--blue-bright);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.filter-btn:hover::after,.filter-btn.active::after{transform:scaleX(1)}
.filter-btn:hover,.filter-btn.active{color:var(--blue-bright);border-color:var(--blue-bright);background:rgba(26,159,212,.1)}
.filter-btn-mine{color:var(--yellow);border-color:rgba(255,226,52,.25)}
.filter-btn-mine::after{background:var(--yellow)}
.filter-btn-mine:hover,.filter-btn-mine.active{color:var(--yellow);border-color:var(--yellow);background:rgba(255,226,52,.1)}
.nft-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;max-width:1200px;margin:0 auto;padding:30px}
/* Skeleton placeholder cards */
.nft-skeleton{
  background:var(--panel2);
  border:2px solid var(--border);
  border-radius:8px;
  aspect-ratio:0.64;
  position:relative;
  overflow:hidden;
}
.nft-skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    110deg,
    transparent 30%,
    rgba(26,159,212,0.04) 50%,
    transparent 70%
  );
  animation:skeleton-shimmer 1.8s ease-in-out infinite;
}
@keyframes skeleton-shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
.nft-card{
  position:relative;
  background:var(--glass);backdrop-filter:blur(10px);
  border:2px solid;border-radius:8px;
  overflow:hidden;cursor:pointer;
  transition:transform .2s,border-color .2s,box-shadow .2s;
  opacity:0;transform:scale(.85);
  border-color:rgba(149,165,166,.4);
  box-shadow:0 4px 15px rgba(149,165,166,.15);
}
.nft-card:hover{z-index:10}
.nft-card img{width:100%;display:block;image-rendering:pixelated}

/* ═══ TIER-BASED CARD BORDERS & GLOW ═══ */
.nft-card.tier-legendary{border-color:rgba(231,76,60,.7);box-shadow:0 4px 15px rgba(231,76,60,.3)}
.nft-card.tier-legendary:hover{border-color:rgba(231,76,60,.9);box-shadow:0 8px 25px rgba(231,76,60,.45)}
.nft-card.tier-epic{border-color:rgba(255,176,38,.7);box-shadow:0 4px 15px rgba(255,176,38,.3)}
.nft-card.tier-epic:hover{border-color:rgba(255,176,38,.9);box-shadow:0 8px 25px rgba(255,176,38,.45)}
.nft-card.tier-rare{border-color:rgba(142,68,173,.7);box-shadow:0 4px 15px rgba(142,68,173,.3)}
.nft-card.tier-rare:hover{border-color:rgba(142,68,173,.9);box-shadow:0 8px 25px rgba(142,68,173,.45)}
.nft-card.tier-uncommon{border-color:rgba(52,152,219,.7);box-shadow:0 4px 15px rgba(52,152,219,.3)}
.nft-card.tier-uncommon:hover{border-color:rgba(52,152,219,.9);box-shadow:0 8px 25px rgba(52,152,219,.45)}
.nft-card.tier-common{border-color:rgba(39,174,96,.7);box-shadow:0 4px 15px rgba(39,174,96,.3)}
.nft-card.tier-common:hover{border-color:rgba(39,174,96,.9);box-shadow:0 8px 25px rgba(39,174,96,.45)}
.nft-card.tier-standard{border-color:rgba(149,165,166,.4);box-shadow:0 4px 15px rgba(149,165,166,.15)}
.nft-card.tier-standard:hover{border-color:rgba(149,165,166,.7);box-shadow:0 8px 25px rgba(149,165,166,.3)}

/* ═══ CARD BADGES ═══ */
.tier-star{position:absolute;top:4px;right:6px;font-size:20px;z-index:1;text-shadow:0 2px 6px rgba(0,0,0,.6);line-height:1}

/* ═══ CARD INFO ═══ */
.nft-info{padding:12px 14px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.4))}
.nft-num{font-family:"Press Start 2P",monospace;font-size:12px;color:var(--blue-bright);margin-bottom:6px;display:block}
.nft-rank{font-family:"Share Tech Mono",monospace;font-size:14px;color:var(--text-dim);display:flex;justify-content:space-between;align-items:center}
.nft-rank .badge{font-size:13px;padding:3px 8px;border:1px solid;border-radius:2px}
.nft-rank .badge.tier-legendary{color:#E74C3C;background:rgba(231,76,60,.1);border-color:rgba(231,76,60,.3)}
.nft-rank .badge.tier-epic{color:#FFB026;background:rgba(255,176,38,.1);border-color:rgba(255,176,38,.3)}
.nft-rank .badge.tier-rare{color:#8E44AD;background:rgba(142,68,173,.1);border-color:rgba(142,68,173,.3)}
.nft-rank .badge.tier-uncommon{color:#3498DB;background:rgba(52,152,219,.1);border-color:rgba(52,152,219,.3)}
.nft-rank .badge.tier-common{color:#27AE60;background:rgba(39,174,96,.1);border-color:rgba(39,174,96,.3)}
.nft-rank .badge.tier-standard{color:#95A5A6;background:rgba(149,165,166,.08);border-color:rgba(149,165,166,.2)}
.tier-label{font-family:"Share Tech Mono",monospace;font-size:13px;font-weight:bold;letter-spacing:1.5px;text-transform:uppercase}
.nft-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.tag{font-family:"Share Tech Mono",monospace;font-size:12px;color:rgba(200,216,232,.55);background:rgba(255,255,255,.04);padding:3px 8px;border-radius:2px;letter-spacing:1px}

/* ══════════════ MODAL ══════════════ */
#modal-overlay{position:fixed;inset:0;z-index:9993;background:rgba(0,0,0,.8);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
#modal-overlay.open{opacity:1;pointer-events:all}
#modal{background:var(--panel);border:2px solid var(--blue-border);border-radius:10px;max-width:520px;width:90%;max-height:96vh;display:flex;flex-direction:column;overflow:hidden;transform:scale(.9);transition:transform .3s,border-color .3s,box-shadow .3s;position:relative;box-shadow:0 24px 64px rgba(0,0,0,.7),0 0 40px rgba(26,159,212,.1)}
#modal.tier-legendary{border-color:rgba(231,76,60,.7);box-shadow:0 24px 64px rgba(0,0,0,.7),0 0 40px rgba(231,76,60,.2)}
#modal.tier-epic{border-color:rgba(255,176,38,.7);box-shadow:0 24px 64px rgba(0,0,0,.7),0 0 40px rgba(255,176,38,.2)}
#modal.tier-rare{border-color:rgba(142,68,173,.7);box-shadow:0 24px 64px rgba(0,0,0,.7),0 0 40px rgba(142,68,173,.2)}
#modal.tier-uncommon{border-color:rgba(52,152,219,.7);box-shadow:0 24px 64px rgba(0,0,0,.7),0 0 40px rgba(52,152,219,.2)}
#modal.tier-common{border-color:rgba(39,174,96,.7);box-shadow:0 24px 64px rgba(0,0,0,.7),0 0 40px rgba(39,174,96,.2)}
#modal.tier-standard{border-color:rgba(149,165,166,.4)}
#modal-overlay.open #modal{transform:scale(1)}
#modal-close{position:absolute;top:10px;left:10px;font-size:18px;line-height:1;color:rgba(255,255,255,.85);cursor:pointer;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);border:none;padding:4px 10px;border-radius:4px;transition:background .2s,color .2s;z-index:2}
#modal-close:hover{background:rgba(0,0,0,.7);color:#fff}
.modal-img-star{position:absolute;top:10px;right:10px;font-size:23px;line-height:1;z-index:2;text-shadow:0 2px 6px rgba(0,0,0,.6);display:none}
.modal-img-star.visible{display:block}
#modal-img{width:100%;image-rendering:pixelated;flex-shrink:0}
#modal-body{padding:22px 26px 26px;overflow:visible;position:relative}
#modal-name{margin-bottom:0}
#modal-rank{font-family:"Share Tech Mono",monospace;font-size:14px;color:var(--text-dim);margin-bottom:18px;line-height:1.6}
.modal-tier{font-weight:bold;font-size:15px;letter-spacing:1px}

/* ═══ MODAL NAME REDESIGN ═══ */
.modal-name-wrap {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 7px;
}
.modal-name-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.4;
}
.modal-name-line1,
.modal-name-line2 {
  font-family: "Press Start 2P", monospace;
  font-size: 12px;
  color: var(--blue-bright);
}
.modal-name-id {
  font-family: "Press Start 2P", monospace;
  font-size: 26px;
  color: var(--blue-bright);
  display: flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 14px var(--blue-glow);
}

/* ═══ MODAL TIER STAR SIZE ═══ */
.modal-tier-star {
  font-size: 18px;
  vertical-align: middle;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

@media (max-width: 400px) {
  .modal-name-wrap {
    flex-direction: column;
    gap: 4px;
  }
  .modal-name-id {
    font-size: 22px;
  }
}
#modal-traits{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.modal-tag{font-family:"Share Tech Mono",monospace;font-size:14px;color:var(--blue-bright);background:var(--blue-glass);border:1px solid var(--blue-border);padding:5px 12px;border-radius:3px}
.modal-actions{display:flex;gap:8px;align-items:stretch}
.modal-actions>*,.modal-actions .sx-wrap{flex:1 1 0;min-width:0}
#modal-btn{font-family:"Rajdhani","Share Tech Mono",sans-serif;font-size:14px;font-weight:600;background:#007bff;color:#fff;border:1px solid #007bff;border-radius:8px;padding:10px 16px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .2s;box-sizing:border-box;width:100%;position:relative;overflow:hidden}
#modal-btn::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(255,255,255,.6);transform:scaleX(0);transform-origin:left;transition:transform .4s}
#modal-btn:hover::after{transform:scaleX(1)}
#modal-btn:hover{background:#0069d9}
.modal-detail-link{font-family:"Share Tech Mono",monospace;font-size:14px;color:var(--blue-bright);text-decoration:none;display:inline-block;margin-left:16px;padding:13px 0;letter-spacing:2px;transition:color .2s}
.modal-detail-link:hover{color:var(--yellow)}

/* ═══ SHARE PANEL ═══ */
.sx-wrap{position:relative;flex:1;display:flex}
.sx-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px 16px;font-family:"Rajdhani","Share Tech Mono",sans-serif;font-size:14px;font-weight:600;letter-spacing:1px;cursor:pointer;border-radius:8px;position:relative;overflow:hidden;transition:all .2s;background:var(--glass);color:var(--blue-bright);border:1px solid var(--blue-border);box-sizing:border-box}
.sx-toggle::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--blue-bright);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.sx-toggle:hover::after{transform:scaleX(1)}
.sx-toggle:hover{background:rgba(26,159,212,.15);border-color:var(--blue-bright)}
.sx-toggle.open{background:rgba(26,159,212,.15);border-color:var(--blue-bright);color:#fff}
.sx-toggle svg{flex-shrink:0}
.sx-chevron{font-size:10px;transition:transform .2s;margin-left:4px}
.sx-toggle.open .sx-chevron{transform:rotate(180deg)}
.sx-panel{position:absolute;bottom:100%;left:0;right:0;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;background:var(--panel);border-radius:4px;z-index:10}
.sx-panel.open{max-height:300px;padding-bottom:8px}
.sx-btns{display:flex;flex-direction:column;gap:6px}
.sx-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 14px;font-family:"Share Tech Mono",monospace;font-size:13px;letter-spacing:2px;cursor:pointer;border-radius:4px;position:relative;overflow:hidden;transition:all .2s;background:var(--glass);color:var(--blue-bright);border:1px solid var(--blue-border)}
.sx-btn::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--blue-bright);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.sx-btn:hover::after{transform:scaleX(1)}
.sx-btn svg{flex-shrink:0}
.sx-btn:hover{background:rgba(26,159,212,.15);border-color:var(--blue-bright)}
.sx-btn:active{background:rgba(26,159,212,.25)}
.sx-btn.sx-twitter:hover{background:rgba(29,161,242,.1);color:#1DA1F2;border-color:rgba(29,161,242,.4)}
.sx-btn.sx-twitter::after{background:#1DA1F2}
.sx-btn.sx-discord:hover{background:rgba(88,101,242,.1);color:#5865F2;border-color:rgba(88,101,242,.4)}
.sx-btn.sx-discord::after{background:#5865F2}
.sx-btn.sx-telegram:hover{background:rgba(38,165,228,.1);color:#26A5E4;border-color:rgba(38,165,228,.4)}
.sx-btn.sx-telegram::after{background:#26A5E4}
.sx-btn.sx-whatsapp:hover{background:rgba(37,211,102,.1);color:#25D366;border-color:rgba(37,211,102,.4)}
.sx-btn.sx-whatsapp::after{background:#25D366}
.sx-toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--panel);border:1px solid rgba(0,212,170,.3);color:var(--green);font-family:"Share Tech Mono",monospace;font-size:13px;letter-spacing:1px;padding:10px 24px;border-radius:6px;z-index:9999;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;white-space:nowrap;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.sx-toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* ══════════════ SEARCH ══════════════ */
#search-section{background:transparent;padding:20px 0;width:100%}
.search-wrap{max-width:700px;margin:0 auto 36px;position:relative}
.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:rgba(26,159,212,.5);font-size:17px;pointer-events:none}
#search-input{
  width:100%;background:var(--glass);backdrop-filter:blur(12px);
  border:1px solid var(--blue-border);
  padding:15px 16px 15px 46px;
  color:#e0eaf4;font-family:"Share Tech Mono",monospace;font-size:17px;
  outline:none;border-radius:6px;transition:border-color .2s,box-shadow .2s;
}
#search-input::placeholder{color:rgba(200,216,232,.3)}
#search-input:focus{border-color:rgba(64,196,255,.5);box-shadow:0 0 0 3px rgba(26,159,212,.08)}
#search-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-width:900px;margin:0 auto;min-height:60px}
.sr-empty{grid-column:1/-1;text-align:center;font-family:"Share Tech Mono",monospace;font-size:15px;color:var(--text-dim);padding:28px 0}

/* ══════════════ ABOUT ══════════════ */
#about{background:transparent;padding:20px 0;width:100%}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:1000px;margin:0 auto;align-items:center}
@media(max-width:750px){.about-grid{grid-template-columns:1fr}}
.about-text h2{font-family:"Press Start 2P",monospace;font-size:clamp(13px,1.9vw,20px);color:var(--blue-bright);margin-bottom:22px;line-height:1.7}
.about-text p{font-size:18px;font-weight:400;color:rgba(200,216,232,.78);line-height:1.9;margin-bottom:16px;letter-spacing:.3px}
.about-text p strong{color:#e0eaf4;font-weight:600}
.about-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.about-link{
  font-family:"Share Tech Mono",monospace;font-size:14px;letter-spacing:2px;
  color:var(--blue-bright);border:1px solid var(--blue-border);
  padding:9px 18px;text-decoration:none;text-transform:uppercase;
  background:var(--glass);backdrop-filter:blur(8px);transition:all .2s;
}
.about-link:hover{background:rgba(26,159,212,.12);border-color:var(--blue-bright)}
.about-punks-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.about-punk{border:1px solid var(--blue-border);overflow:hidden;border-radius:4px;opacity:0;transform:scale(.8)}
.about-punk img{width:100%;image-rendering:pixelated;display:block}




/* ── Tablet: hide nav links, show hamburger ── */
@media(max-width:1400px){
  .nav-hamburger{display:flex}
  .nav-links{display:none}
}
/* ── Narrow: compact xrp.cafe + Xaman text ── */
@media(max-width:900px){
  .btn-buy{display:none}
  .btn-buy-compact{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;
    background-color:#006cfa;border:1px solid #006cfa;border-radius:4px;
    transition:all .3s cubic-bezier(.645,.045,.355,1);
  }
  .btn-buy-compact:hover{background-color:#0060e0;border-color:#0060e0}
  .btn-buy-compact:active{background-color:#0050c0;border-color:#0050c0}
  .btn-buy-compact img{width:22px;height:22px;border-radius:4px}
  .xaman-signin-btn b{display:none}
  .xaman-signin-btn .xaman-icon{font-size:18px}
  .xaman-signin-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0}
  .xaman-signin-btn.connected{width:auto;padding:0 8px}
  .xaman-signin-btn.connected b{display:inline;font-size:11px;padding:0}
  .addr-full{display:none}
  .addr-short{display:inline}
}
@media(max-width:768px){
  nav{padding:18px 16px}
  .nav-right{gap:10px}
  #hero-content{padding:0 16px;align-self:stretch}
  .hero-title{font-size:clamp(24px,7vw,42px)}
  .hero-eye{margin-bottom:22px}
  .hero-sub{font-size:clamp(15px,3.5vw,22px);letter-spacing:2px;margin-top:22px}
  #hero-cta{flex-direction:row;align-items:center;gap:16px;margin-top:clamp(124px,16vw,154px);font-size:clamp(24px,7vw,42px);font-family:"Press Start 2P",monospace;max-width:calc(11ch - 6px);width:100%;margin-left:auto;margin-right:auto;padding:0}
  .btn-px{flex:1;min-width:0;justify-content:center;font-size:15px;padding:0 12px;white-space:nowrap}
  #page-scroll{top:calc(var(--header-total) + 36px);left:16px;right:16px;bottom:42px}
  .hud-label{font-size:11px;letter-spacing:1px}
  .hud-label.tl{top:14px;left:18px}
  .hud-label.tr{top:14px;right:18px}
  .hud-label.bl{bottom:18px;left:18px}
  .hud-label.br{bottom:18px;right:18px}
  #hud-frame .hud-c{width:24px;height:24px}
  .sec-hd{margin-bottom:20px}
  .s-block{padding:18px 12px}
  .s-num{font-size:clamp(18px,5vw,26px);margin-bottom:6px}
  .s-label{font-size:12px;letter-spacing:2px}
  .rarity-grid{grid-template-columns:1fr;gap:12px}
  .rarity-grid>div{width:100%}
  .trait-panel{padding:16px}
  .trait-label{width:120px;font-size:12px}
  .trait-count{font-size:12px;width:45px}
  .xaman-signin-btn{font-size:14px}
  #punk-img{width:64px;height:64px}
  #smoke-wrap{width:64px;height:64px}
  #punk-shadow{width:45px;height:7px}
}
@media(max-width:480px){
  .nav-hamburger{padding:3px}
  .btn-buy-compact{display:none}
  .hero-title{font-size:clamp(20px,6.5vw,34px)}
  .nft-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .gallery-filters{gap:6px}
  .filter-btn{font-size:13px;padding:10px 14px}
  .btn-px{font-size:14px;padding:0 8px;min-height:44px}
  .xaman-signin-btn{width:34px;height:34px}
  .xaman-signin-btn.connected{width:auto;padding:0 6px}
}

/* ══════════════ SHARED: HOVER UNDERLINE EFFECT ══════════════ */
.fx-underline {
  position: relative;
  overflow: hidden;
}
.fx-underline::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--blue-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s;
}
.fx-underline:hover::after {
  transform: scaleX(1);
}

/* ══════════════ RICHLIST TEASER ══════════════ */

/* Section subtitle */
.sec-sub {
  font-family: "Share Tech Mono", monospace;
  font-size: 14px;
  color: var(--text-dim);
  letter-spacing: 3px;
  margin-top: 12px;
  text-transform: uppercase;
}

/* Overview stat blocks */
.rl-overview {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 2px;
  max-width: 900px;
  margin: 0 auto 40px;
}
.rl-ov-block {
  text-align: center;
  padding: 24px 12px;
  background: rgba(26,159,212,.03);
  border: 1px solid rgba(26,159,212,.08);
  transition: border-color .2s, background .2s;
}
.rl-ov-block:hover {
  border-color: rgba(64,196,255,.4);
  background: rgba(26,159,212,.08);
}
.rl-ov-num {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(18px,2.5vw,28px);
  color: var(--blue-bright);
  text-shadow: 0 0 20px var(--blue-glow);
  display: block;
  margin-bottom: 10px;
}
.rl-ov-label {
  font-family: "Share Tech Mono", monospace;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* Table */
.rl-wrap { max-width: 900px; margin: 0 auto; }
.rl-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.rl-table thead th {
  font-family: "Share Tech Mono", monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--blue-border);
}
.rl-table thead th.r { text-align: right; }
.rl-table thead th.c { text-align: center; }
.rl-table tbody tr { transition: background .15s; cursor: pointer; }
.rl-table tbody tr:hover { background: rgba(26,159,212,.06); }
.rl-table tbody td {
  font-family: "Share Tech Mono", monospace;
  font-size: 14px;
  padding: 0 12px;
  height: 52px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(26,159,212,.07);
}
.rl-table tbody td.r { text-align: right; }
.rl-table tbody td.c { text-align: center; }

/* Rank column — gold/silver/bronze for positions 1-3 */
.rl-rank {
  font-family: "Press Start 2P", monospace;
  font-size: 14px;
  color: var(--text-dim);
  width: 50px;
  text-align: center;
}
.rl-rank.gold   { color: #ffd700; text-shadow: 0 0 10px rgba(255,215,0,.4); }
.rl-rank.silver { color: #c0c0c0; text-shadow: 0 0 8px rgba(192,192,192,.3); }
.rl-rank.bronze { color: #cd7f32; text-shadow: 0 0 8px rgba(205,127,50,.3); }

/* Holder avatar thumbnail — Xaman profile picture or punk fallback */
.rl-avatar-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--blue-border);
  vertical-align: middle;
  object-fit: cover;
}
/* When onerror fires and swaps to a punk image, add pixelated rendering */
.rl-avatar-thumb.rl-punk-pixelated {
  image-rendering: pixelated;
  border-radius: 4px;
}

/* Holder tier badges with pixel SVG icons */
.rl-tier {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: "Press Start 2P", monospace;
  font-size: 7px;
  letter-spacing: 1px;
  padding: 3px 7px 3px 5px;
  border-radius: 3px;
  white-space: nowrap;
  margin-left: 8px;
  vertical-align: middle;
}
.rl-tier svg { width: 14px; height: 14px; flex-shrink: 0; }
.rl-tier.whale   { color: #40c4ff; background: rgba(64,196,255,.1);   border: 1px solid rgba(64,196,255,.3); }
.rl-tier.shark   { color: #8E44AD; background: rgba(142,68,173,.1);   border: 1px solid rgba(142,68,173,.3); }
.rl-tier.dolphin { color: #00ff88; background: rgba(0,255,136,.1);    border: 1px solid rgba(0,255,136,.3); }
.rl-tier.fish    { color: #95A5A6; background: rgba(149,165,166,.08); border: 1px solid rgba(149,165,166,.2); }

/* Wallet address */
.rl-addr { color: var(--blue-bright); letter-spacing: .5px; }

/* Punk count — the big yellow number */
.rl-count {
  font-family: "Press Start 2P", monospace;
  font-size: 16px;
  color: var(--yellow);
  text-shadow: 0 0 12px rgba(255,226,52,.25);
}

/* % supply bar */
.rl-pct-bar { display: flex; align-items: center; gap: 8px; }
.rl-pct-track {
  flex: 1;
  height: 4px;
  background: rgba(26,159,212,.1);
  border-radius: 2px;
  overflow: hidden;
  min-width: 40px;
}
.rl-pct-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-bright));
  transition: width .6s ease;
}
.rl-pct-text {
  font-size: 12px;
  color: var(--text-dim);
  min-width: 45px;
  text-align: right;
}

/* Best rank badge — uses rarity-tier colors */
.rl-best {
  display: inline-block;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid;
  white-space: nowrap;
}
.rl-best.tier-legendary { color: #E74C3C; background: rgba(231,76,60,.1);   border-color: rgba(231,76,60,.3); }
.rl-best.tier-epic      { color: #FFB026; background: rgba(255,176,38,.1);  border-color: rgba(255,176,38,.3); }
.rl-best.tier-rare      { color: #8E44AD; background: rgba(142,68,173,.1);  border-color: rgba(142,68,173,.3); }
.rl-best.tier-uncommon  { color: #3498DB; background: rgba(52,152,219,.1);  border-color: rgba(52,152,219,.3); }
.rl-best.tier-common    { color: #27AE60; background: rgba(39,174,96,.1);   border-color: rgba(39,174,96,.3); }
.rl-best.tier-standard  { color: #95A5A6; background: rgba(149,165,166,.08);border-color: rgba(149,165,166,.2); }

/* Logged-in wallet row highlight */
.rl-table tbody tr.rl-me { background: rgba(255,226,52,.04); }
.rl-table tbody tr.rl-me:hover { background: rgba(255,226,52,.08); }
.rl-table tbody tr.rl-me td:first-child {
  border-left: 2px solid var(--yellow);
  box-shadow: inset 4px 0 12px -4px rgba(255,226,52,.15);
}
.rl-you {
  display: inline-flex;
  align-items: center;
  font-family: "Press Start 2P", monospace;
  font-size: 7px;
  letter-spacing: 1px;
  padding: 3px 7px 3px 5px;
  border-radius: 3px;
  color: var(--yellow);
  background: rgba(255,226,52,.1);
  border: 1px solid rgba(255,226,52,.3);
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

/* CTA button — same hover as KPI blocks */
.rl-cta { text-align: center; margin-top: 32px; }
.btn-rl {
  display: inline-block;
  font-family: "Share Tech Mono", monospace;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--blue-bright);
  text-decoration: none;
  padding: 12px 28px;
  border: 1px solid rgba(26,159,212,.08);
  background: rgba(26,159,212,.03);
  transition: all .25s;
  cursor: pointer;
}
.btn-rl:hover {
  border-color: rgba(64,196,255,.4);
  background: rgba(26,159,212,.08);
  text-shadow: 0 0 10px var(--blue-glow);
}

/* Run leaderboard tabs */
.run-lb-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:20px}
.run-lb-tab{font-family:"Press Start 2P",monospace;font-size:10px;padding:8px 20px;background:rgba(255,255,255,.03);color:#556;border:1px solid rgba(255,255,255,.08);border-radius:4px;cursor:pointer;transition:all .2s}
.run-lb-tab:hover{color:var(--blue-bright);border-color:rgba(64,196,255,.3)}
.run-lb-tab.active{color:var(--blue-bright);border-color:var(--blue);background:rgba(64,196,255,.08)}

/* Responsive */
@media(max-width:700px) {
  .rl-overview { grid-template-columns: repeat(2,1fr); }
  .rl-table thead th.hide-m,
  .rl-table tbody td.hide-m { display: none; }
  .rl-table tbody td { font-size: 12px; padding: 0 8px; }
  .rl-count { font-size: 13px; }
  .rl-rank { font-size: 12px; }
  .rl-tier { font-size: 6px; padding: 2px 5px 2px 3px; }
  .rl-tier svg { width: 11px; height: 11px; }
}