/* ===========================
   AnalPEG — Hero Landing Page
   Reference-matched: arced title, drippy mud, gem mini plugs
   =========================== */

:root {
  --bg-1: #1d2342;
  --bg-2: #1a1f3a;
  --bg-3: #161a30;
  --pink: #f127c8;
  --pink-2: #ff3dd6;
  --pink-glow: rgba(241, 39, 200, 0.55);
  --mud-1: #5a3a18;
  --mud-2: #4a2e10;
  --mud-3: #2a1808;
  --ink: #0a0c1a;
  --white: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
}
body.locked,
html:has(body.locked) {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Press Start 2P', system-ui, sans-serif;
  background:
    radial-gradient(ellipse at 50% 45%, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-3) 100%);
  color: var(--white);
  -webkit-font-smoothing: none;
  font-smooth: never;
  image-rendering: pixelated;
  position: relative;
  user-select: none;
}

.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.025) 0,
      rgba(255,255,255,0.025) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode: overlay;
  opacity: 0.6;
}
.vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
}

/* ============= HERO ============= */
.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 3;
}

/* ============= TITLE — arched ============= */
.title {
  position: absolute;
  top: 9vh;                   /* leaves room for the fixed top nav */
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;                 /* behind plug (z=5) */
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(28px, 7.5vw, 120px);
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  display: inline-flex;
  align-items: flex-start;
  filter: drop-shadow(5px 5px 0 var(--ink));
}

.title .ch {
  display: inline-block;
  /* Static arc position via longhands so transform: is free for animations */
  translate: 0 var(--base-y);
  rotate: var(--base-rot);

  opacity: 0;
  transform: translateY(-220px) scale(2);
  animation:
    chDrop 0.6s cubic-bezier(0.22, 1.4, 0.36, 1) forwards,
    chWiggle 5s ease-in-out infinite;
  animation-delay:
    calc(0.08s * var(--i)),
    calc(2.4s + 0.22s * var(--i));
  text-shadow: 4px 4px 0 var(--ink);
}
.title .is-anal { color: var(--white); }
.title .is-peg  { color: var(--pink); }

@keyframes chDrop {
  0%   { opacity: 0; transform: translateY(-220px) rotate(-30deg) scale(2.2); }
  60%  { opacity: 1; transform: translateY(12px) rotate(8deg) scale(0.92); }
  80%  { transform: translateY(-4px) rotate(-3deg) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
/* Subtle traveling wiggle — staggered delay across letters creates a wave */
@keyframes chWiggle {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-3px) rotate(1.5deg); }
}

/* ============= STAGE / PLUG ============= */
/* Plug stays in FRONT of title (z-index higher) */
.stage {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 72vh;
  aspect-ratio: 17 / 26;
  z-index: 5;
  pointer-events: none;
}

.plug-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  filter:
    drop-shadow(0 0 30px var(--pink-glow))
    drop-shadow(0 0 60px var(--pink-glow));
  animation:
    plugIn 0.95s cubic-bezier(0.22, 1.4, 0.36, 1) 1.2s forwards,
    plugBob 3.6s ease-in-out 2.2s infinite;
}

@keyframes plugIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(-180deg); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(15deg); }
  80%  { transform: translate(-50%, -50%) scale(0.96) rotate(-6deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}
@keyframes plugBob {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(0); }
  50%      { transform: translate(-50%, -50%) translateY(-12px) rotate(2deg); }
}

.plug {
  position: relative;
  width: 100%;
  height: 100%;
}
/* Hero pixel plug (taller teardrop) */
.plug--hero::before,
.plug--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  image-rendering: pixelated;
}
.plug--hero::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 186 276' shape-rendering='crispEdges'><path d='M70,0 H100 V10 H110 V20 H120 V30 H130 V40 H140 V50 H150 V70 H160 V120 H150 V140 H140 V150 H130 V160 H120 V170 H110 V180 H100 V220 H120 V230 H150 V250 H120 V260 H50 V250 H20 V230 H50 V220 H70 V180 H60 V170 H50 V160 H40 V150 H30 V140 H20 V120 H10 V70 H20 V50 H30 V40 H40 V30 H50 V20 H60 V10 H70 Z' fill='%230a0c1a' stroke='%230a0c1a' stroke-width='14' stroke-linejoin='miter'/></svg>");
}
.plug--hero::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 186 276' shape-rendering='crispEdges'><path d='M70,0 H100 V10 H110 V20 H120 V30 H130 V40 H140 V50 H150 V70 H160 V120 H150 V140 H140 V150 H130 V160 H120 V170 H110 V180 H100 V220 H120 V230 H150 V250 H120 V260 H50 V250 H20 V230 H50 V220 H70 V180 H60 V170 H50 V160 H40 V150 H30 V140 H20 V120 H10 V70 H20 V50 H30 V40 H40 V30 H50 V20 H60 V10 H70 Z' fill='%23f127c8'/></svg>");
}

/* Pixel highlight squares on bulb (plug shines) */
.shine {
  position: absolute;
  background: #ffffff;
  z-index: 3;
  image-rendering: pixelated;
  animation: shineBlink 2.4s ease-in-out infinite;
}
.shine--1 { width: 5%; height: 3%; top: 18%; left: 38%; }
.shine--2 { width: 3.5%; height: 2.2%; top: 24%; left: 35%; animation-delay: 0.8s; }
@keyframes shineBlink {
  0%, 100% { opacity: 0.95; transform: scale(1); }
  50%      { opacity: 0.4;  transform: scale(0.85); }
}

/* ============= MINI PLUGS (smaller hero plug w/ glow) ============= */
.mini {
  position: absolute;
  opacity: 0;
  filter:
    drop-shadow(0 0 14px var(--pink-glow))
    drop-shadow(0 0 28px var(--pink-glow))
    drop-shadow(0 0 6px rgba(255, 100, 220, 0.9));
  animation:
    miniPop 0.7s cubic-bezier(0.22, 1.4, 0.36, 1) forwards,
    miniFloat 4s ease-in-out infinite,
    miniGlow 2.4s ease-in-out infinite;
  animation-delay:
    var(--delay),
    calc(var(--delay) + 0.7s),
    calc(var(--delay) + 0.7s);
  z-index: 4;
}
.gemplug-use {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes miniGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 12px var(--pink-glow))
      drop-shadow(0 0 22px var(--pink-glow))
      drop-shadow(0 0 6px rgba(255, 100, 220, 0.85));
  }
  50% {
    filter:
      drop-shadow(0 0 22px var(--pink-glow))
      drop-shadow(0 0 44px rgba(255, 90, 220, 0.85))
      drop-shadow(0 0 12px rgba(255, 200, 240, 0.8));
  }
}

@keyframes miniPop {
  0%   { opacity: 0; transform: scale(0) rotate(-180deg); }
  70%  { opacity: 1; transform: scale(1.25) rotate(20deg); }
  100% { opacity: 1; transform: scale(1) rotate(var(--rest-rot, 0deg)); }
}
@keyframes miniFloat {
  0%, 100% { transform: translateY(0) rotate(var(--rest-rot, -6deg)); }
  50%      { transform: translateY(-10px) rotate(calc(var(--rest-rot, 0deg) + 12deg)); }
}

/* Reference-positioned mini plugs — varied size & tilt
   aspect-ratio matches the hero plug (17:26) so the silhouette fills cleanly */
.mini--1 { top: 16%;   left: 12%;  height: 16vh; aspect-ratio: 17/26; --rest-rot: -8deg; }
.mini--2 { top: 36%;   right: 9%;  height: 18vh; aspect-ratio: 17/26; --rest-rot: 6deg;
           animation-delay: 1.65s, 2.35s, 2.35s; }
.mini--3 { top: 58%;   right: 34%; height: 8vh;  aspect-ratio: 17/26; --rest-rot: 14deg;
           animation-delay: 1.8s, 2.5s, 2.5s; }
.mini--4 { bottom: 22%; left: 22%; height: 10vh; aspect-ratio: 17/26; --rest-rot: -14deg;
           animation-delay: 1.95s, 2.65s, 2.65s; }

/* ============= MUD SPLASHES ============= */
.splashes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.splash {
  position: absolute;
  opacity: 0;
  transform: scale(0) rotate(var(--rot, 0deg));
  animation: splat 0.55s cubic-bezier(0.22, 1.4, 0.36, 1) forwards,
             splashIdle 6s ease-in-out infinite;
  animation-delay: var(--delay), calc(var(--delay) + 0.6s);
  filter:
    drop-shadow(3px 5px 0 rgba(0,0,0,0.5))
    drop-shadow(0 0 14px rgba(0,0,0,0.3));
  transform-origin: center;
}
.splash svg { display: block; width: 100%; height: 100%; overflow: visible; }
.splash .mud path,
.splash .mud circle,
.splash .mud ellipse {
  fill: var(--mud-1);
  stroke: var(--mud-3);
  stroke-width: 4;
  stroke-linejoin: round;
  paint-order: stroke;
}
.splash .mud circle,
.splash .mud ellipse { fill: var(--mud-2); }

@keyframes splat {
  0%   { opacity: 0; transform: scale(0) rotate(-90deg); }
  60%  { opacity: 1; transform: scale(1.18) rotate(8deg); }
  80%  { transform: scale(0.94) rotate(-3deg); }
  100% { opacity: 1; transform: scale(1) rotate(var(--rot, 0deg)); }
}
@keyframes splashIdle {
  0%, 100% { transform: scale(1) rotate(var(--rot, 0deg)); }
  50%      { transform: scale(1.03) rotate(calc(var(--rot, 0deg) + 1.5deg)); }
}

/* Layout */
.splash--tl       { top: -9%;  left: -7%;  width: 32vw; --rot: -6deg; }
.splash--tr       { top: -10%; right: -8%; width: 31vw; --rot: 9deg; }
.splash--nft      { bottom: 8%; left: -6%;  width: 26vw; --rot: -3deg; z-index: 2; }
.splash--unhinged { bottom: -10%; right: -8%; width: 35vw; --rot: 6deg; }

.splash--small { width: 8vw; }
.splash--s1 { top: 12%;  left: 28%; --rot: 22deg; width: 7vw; }
.splash--s2 { top: 8%;   right: 32%; --rot: -22deg; width: 6vw; }
.splash--s3 { top: 56%;  left: 38%; --rot: 14deg; width: 5vw; }
.splash--s4 { bottom: 30%; right: 32%; --rot: -16deg; width: 6vw; }
.splash--s5 { top: 38%;  left: 8%;  --rot: 28deg; width: 5vw; }

/* Floating loose droplets */
.droplet {
  position: absolute;
  z-index: 2;
  opacity: 0;
  animation: dropletIn 0.5s ease forwards,
             dropletFloat 5s ease-in-out infinite;
  animation-delay: var(--delay), calc(var(--delay) + 0.5s);
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.4));
}
.droplet svg { width: 100%; height: 100%; }
.droplet .mud path { fill: var(--mud-1); stroke: var(--mud-3); stroke-width: 2; paint-order: stroke; }
.droplet--d1 { top: 22%; left: 38%; width: 1.6vw; --rot: 0deg; }
.droplet--d2 { top: 32%; right: 25%; width: 1.4vw; --rot: 25deg; transform: rotate(25deg); }
.droplet--d3 { bottom: 30%; left: 50%; width: 1.3vw; --rot: -18deg; transform: rotate(-18deg); }

@keyframes dropletIn {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes dropletFloat {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-6px) rotate(calc(var(--rot, 0deg) + 8deg)); }
}

/* Splash text (rides on the splat) */
.splash-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  color: var(--white);
  font-size: clamp(11px, 1.5vw, 22px);
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-shadow: 3px 3px 0 #000;
  pointer-events: none;
  padding: 18%;
  z-index: 2;
}
.splash-text--nft       { transform: rotate(-12deg); }
.splash-text--unhinged  { transform: rotate(10deg); }

/* ============= CTA ============= */
.cta-row {
  position: absolute;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  opacity: 0;
  animation: ctaIn 0.6s ease 2.5s forwards;
}
@keyframes ctaIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.cta {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(11px, 1.2vw, 18px);
  text-decoration: none;
  color: var(--white);
  background: var(--pink);
  padding: 16px 22px;
  border: 4px solid var(--ink);
  box-shadow:
    6px 6px 0 var(--ink),
    inset -3px -3px 0 rgba(0,0,0,0.25),
    inset 3px 3px 0 rgba(255,255,255,0.18);
  letter-spacing: 0.08em;
  transform: rotate(-1.5deg);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  cursor: pointer;
}
.cta:hover {
  transform: rotate(0) translate(-2px, -2px) scale(1.06);
  box-shadow: 9px 9px 0 var(--ink),
    inset -3px -3px 0 rgba(0,0,0,0.25),
    inset 3px 3px 0 rgba(255,255,255,0.18);
}
.cta:active {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 var(--ink),
    inset -3px -3px 0 rgba(0,0,0,0.25),
    inset 3px 3px 0 rgba(255,255,255,0.18);
}
.cta--chart { background: #2a3a8a; transform: rotate(1.5deg); }
.cta--tg    { background: #2dbfff; color: var(--ink); transform: rotate(-1deg); }

/* ============= Click splat ============= */
.click-splat {
  position: fixed;
  width: 80px; height: 80px;
  pointer-events: none;
  z-index: 999;
  transform: translate(-50%, -50%) scale(0);
  animation: clickSplat 0.6s ease forwards;
}
.click-splat svg { width: 100%; height: 100%; }
@keyframes clickSplat {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 1; }
  60%  { transform: translate(-50%, -50%) scale(1.3) rotate(20deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.6) rotate(40deg); opacity: 0; }
}

/* Title hover glitch */
.title:hover .ch {
  animation: chGlitch 0.4s steps(2) infinite;
}
@keyframes chGlitch {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-2px, 1px); }
  50%      { transform: translate(2px, -1px); }
  75%      { transform: translate(-1px, 2px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============= Responsive ============= */
@media (max-height: 650px) {
  .title { top: 2vh; font-size: clamp(22px, 6vw, 80px); }
  .title .ch { /* flatten arc on short screens */
    translate: 0 calc(var(--base-y) * 0.5);
    rotate: calc(var(--base-rot) * 0.6);
  }
  .stage { height: 64vh; transform: translate(-50%, -52%); }
  .cta-row { bottom: 2vh; gap: 10px; }
  .cta { padding: 10px 14px; font-size: 11px; }
  .splash-text { font-size: 12px; }
}

@media (max-width: 768px) and (orientation: portrait) {
  .title { top: 6vh; font-size: clamp(28px, 11vw, 70px); }
  .stage { height: 56vh; }
  .splash--tl, .splash--tr { width: 55vw; }
  .splash--nft { width: 50vw; bottom: 12%; }
  .splash--unhinged { width: 60vw; }
  .splash--small { width: 14vw; }
  .splash-text { font-size: 11px; padding: 22%; }
  .mini--1 { left: 4%; width: 14vw; height: 7vh; }
  .mini--2 { right: 4%; width: 16vw; height: 8vh; }
  .mini--3 { display: none; }
  .mini--4 { left: 8%; width: 11vw; height: 6vh; }
  .cta-row { gap: 6px; bottom: 3vh; }
  .cta { padding: 8px 10px; font-size: 9px; }
  .droplet { display: none; }
}

/* ============================================================
   TOP NAV  (used on every page)
   ============================================================ */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  font-family: 'Press Start 2P', monospace;
  background: linear-gradient(180deg, rgba(10,12,26,0.85), rgba(10,12,26,0.4) 80%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
}
.topnav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--white);
  font-size: clamp(11px, 1.3vw, 16px);
  letter-spacing: 0.08em;
  filter: drop-shadow(2px 2px 0 var(--ink));
}
.topnav__brand svg {
  width: 28px; height: 28px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 8px var(--pink-glow));
}
.topnav__brand .pink { color: var(--pink); }
.topnav__links {
  display: flex;
  gap: 18px;
  align-items: center;
}
.topnav__links a {
  text-decoration: none;
  color: rgba(255,255,255,0.7);
  font-size: clamp(9px, 1vw, 12px);
  letter-spacing: 0.1em;
  padding: 8px 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.topnav__links a:hover { color: var(--white); }
.topnav__links a.is-active {
  color: var(--pink);
  border-bottom-color: var(--pink);
}
.cta--connect {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(9px, 1vw, 12px);
  text-decoration: none;
  color: var(--white);
  background: var(--pink);
  padding: 10px 14px;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink),
    inset -2px -2px 0 rgba(0,0,0,0.25),
    inset 2px 2px 0 rgba(255,255,255,0.18);
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}
.cta--connect:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink),
    inset -2px -2px 0 rgba(0,0,0,0.25),
    inset 2px 2px 0 rgba(255,255,255,0.18);
}
.cta--connect.connected {
  background: #1f2c5a;
  color: #6df3a3;
}
.cta--connect.connected::before {
  content: "● ";
  color: #6df3a3;
  text-shadow: 0 0 6px #6df3a3;
}

/* ============================================================
   PAGE LAYOUT  (gallery + portfolio share these)
   ============================================================ */
.page {
  position: relative;
  min-height: 100vh;
  padding: 90px 24px 80px;
  background:
    radial-gradient(ellipse at 50% 0%, var(--bg-1) 0%, var(--bg-2) 40%, var(--bg-3) 100%);
  color: var(--white);
  font-family: 'Press Start 2P', monospace;
}
.page::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.025) 0,
      rgba(255,255,255,0.025) 1px,
      transparent 1px,
      transparent 3px);
  mix-blend-mode: overlay;
  opacity: 0.5;
}

.page-header {
  max-width: 1280px;
  margin: 0 auto 36px;
  position: relative;
  z-index: 1;
}
.page-header h1 {
  font-size: clamp(28px, 5vw, 64px);
  letter-spacing: 0.04em;
  text-shadow: 4px 4px 0 var(--ink);
  margin-bottom: 8px;
}
.page-header h1 .pink { color: var(--pink); }
.page-header__sub {
  color: rgba(255,255,255,0.65);
  font-size: clamp(10px, 1.1vw, 14px);
  letter-spacing: 0.06em;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Stat tiles */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.stat {
  background: rgba(10,12,26,0.55);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink),
    inset -2px -2px 0 rgba(0,0,0,0.25),
    inset 2px 2px 0 rgba(255,255,255,0.05);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
.stat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 60%, var(--pink-glow));
  opacity: 0.18;
  pointer-events: none;
}
.stat__num {
  font-size: clamp(20px, 2.4vw, 32px);
  color: var(--pink);
  letter-spacing: 0.04em;
  text-shadow: 2px 2px 0 var(--ink);
}
.stat__num.small { font-size: clamp(14px, 1.6vw, 20px); }
.stat__label {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.18em;
}
.stat__progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  background: var(--pink);
  box-shadow: 0 0 8px var(--pink);
}

/* Filters bar */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
  align-items: center;
}
.filters input[type="search"],
.filters select {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  background: rgba(10,12,26,0.6);
  color: var(--white);
  border: 3px solid var(--ink);
  padding: 10px 14px;
  letter-spacing: 0.06em;
  outline: none;
  min-width: 180px;
}
.filters input[type="search"]:focus,
.filters select:focus { border-color: var(--pink); }

/* ============================================================
   NFT GRID + CARD
   ============================================================ */
.nft-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  position: relative;
  z-index: 1;
}
.nft-card {
  display: block;
  text-decoration: none;
  color: var(--white);
  background: linear-gradient(160deg, #232a52 0%, #161a30 100%);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink),
    inset -2px -2px 0 rgba(0,0,0,0.3),
    inset 2px 2px 0 rgba(255,255,255,0.05);
  padding: 14px;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  --rarity-color: #7e8aa8;
}
.nft-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 4px solid var(--rarity-color);
  pointer-events: none;
}
.nft-card:hover {
  transform: translate(-3px, -3px) rotate(-0.5deg);
  box-shadow: 8px 8px 0 var(--ink),
    0 0 20px var(--rarity-color),
    inset -2px -2px 0 rgba(0,0,0,0.3),
    inset 2px 2px 0 rgba(255,255,255,0.05);
}

.nft-card__art {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 55%, rgba(241,39,200,0.25), transparent 60%);
  margin-bottom: 12px;
  overflow: hidden;
}
.nft-card__art svg {
  width: 70%;
  height: 90%;
  image-rendering: pixelated;
  transform: rotate(var(--tilt, 0deg));
  filter: drop-shadow(0 0 10px var(--pink-glow));
  position: relative;
  z-index: 1;
}
.nft-card__glow {
  position: absolute;
  inset: 20% 25%;
  background: radial-gradient(ellipse, var(--rarity-color), transparent 70%);
  opacity: 0.35;
  filter: blur(20px);
  z-index: 0;
}
.nft-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.nft-card__id {
  font-size: 13px;
  color: var(--white);
  letter-spacing: 0.06em;
}
.nft-card__rarity {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--rarity-color);
  text-shadow: 1px 1px 0 var(--ink);
}
.nft-card__traits {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.trait {
  font-size: 8px;
  letter-spacing: 0.1em;
  background: rgba(255,255,255,0.08);
  padding: 4px 6px;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75);
}

/* Rarity flair */
.nft-card.rarity-rare      { --rarity-color: #2dbfff; }
.nft-card.rarity-epic      { --rarity-color: #b462ff; }
.nft-card.rarity-legendary { --rarity-color: #ffb83d; }
.nft-card.rarity-1_1       { --rarity-color: #ff3dd6; animation: legendaryPulse 2.4s ease-in-out infinite; }
@keyframes legendaryPulse {
  0%, 100% { box-shadow: 5px 5px 0 var(--ink), 0 0 20px var(--rarity-color); }
  50%      { box-shadow: 5px 5px 0 var(--ink), 0 0 40px var(--rarity-color); }
}

/* Skeleton + states */
.nft-skeleton {
  aspect-ratio: 1 / 1;
  background: linear-gradient(110deg, #1a1f3a 30%, #2a3060 50%, #1a1f3a 70%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}
@keyframes skeletonShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.empty-state,
.connect-prompt {
  max-width: 560px;
  margin: 60px auto;
  text-align: center;
  padding: 30px;
  background: rgba(10,12,26,0.45);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  position: relative;
  z-index: 1;
}
.empty-state h2,
.connect-prompt h2 {
  font-size: clamp(16px, 2vw, 22px);
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.empty-state p,
.connect-prompt p {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.empty-state a { color: var(--pink); text-decoration: none; }
.empty-state a:hover { text-decoration: underline; }

.load-more {
  display: block;
  margin: 36px auto 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  background: var(--pink);
  color: var(--white);
  border: 3px solid var(--ink);
  padding: 14px 24px;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.load-more:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ink);
}
.load-more:disabled { opacity: 0.5; cursor: not-allowed; }

.hidden { display: none !important; }

/* Mock-mode banner */
.mock-banner {
  max-width: 1280px;
  margin: 0 auto 18px;
  padding: 10px 14px;
  background: rgba(255, 184, 61, 0.12);
  border: 2px dashed rgba(255, 184, 61, 0.6);
  color: #ffd58a;
  font-size: 10px;
  letter-spacing: 0.08em;
  position: relative;
  z-index: 1;
}

/* Detail modal */
.nft-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.nft-modal.is-open { opacity: 1; pointer-events: auto; }
.nft-modal__panel {
  background: linear-gradient(160deg, #232a52, #161a30);
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  max-width: 460px;
  width: 100%;
  padding: 24px;
  position: relative;
  transform: scale(0.92);
  transition: transform 0.2s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.nft-modal.is-open .nft-modal__panel { transform: scale(1); }
.nft-modal__close {
  position: absolute;
  top: 10px; right: 10px;
  background: var(--pink);
  border: 3px solid var(--ink);
  color: var(--white);
  width: 32px; height: 32px;
  cursor: pointer;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
}

/* Responsive */
@media (max-width: 720px) {
  .topnav { padding: 10px 14px; }
  .topnav__links { gap: 10px; }
  .topnav__links a[data-page="portfolio"] { display: none; }
  .page { padding: 80px 14px 60px; }
  .nft-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .nft-card { padding: 10px; }
  .trait { font-size: 7px; }
}