/* ============================================================
   NATPEPES — CYBERPUNK NEON THEME (override layer)
   Cargar DESPUÉS de assets/index-*.css. No toca lógica JS.
   ============================================================ */

/* ---------- 1. PALETA & TOKENS ---------- */
:root {
  --neon-yellow: #FFFF00;
  --neon-green: #00FF41;
  --neon-magenta: #FF0080;
  --neon-cyan: #00F0FF;
  --neon-blue: #2222FF;
  --color-dark: #000000;
  --color-dark-secondary: #111111;
  --swamp-deep: #0A3D2E;
  --swamp-mud: #6B4423;

  --bg-dark: #000000;
  --bg-panel: rgba(5, 12, 8, .88);
  --bg-panel-hover: rgba(8, 20, 12, .95);
  --bg-card: rgba(6, 14, 9, .9);
  --text-primary: #E8FFE8;
  --text-secondary: #7FCF9A;
  --text-muted: #5a8a6a;
  --teal: #00F0FF;
  --teal-dark: #00808a;
  --purple-glow: #FF0080;
  --purple-mushroom: #00F0FF;
  --orange-warm: #FFFF00;
  --gold: #FFD700;
  --border-glass: rgba(0, 255, 65, .25);
  --border-color: rgba(0, 255, 65, .25);

  --glow-green: 0 0 18px rgba(0, 255, 65, .45);
  --glow-yellow: 0 0 18px rgba(255, 255, 0, .5);
  --glow-magenta: 0 0 22px rgba(255, 0, 128, .5);
  --glow-gold: 0 0 26px rgba(255, 215, 0, .55);
  --glow-red: 0 0 26px rgba(255, 0, 128, .6);
  --glow-purple: 0 0 22px rgba(255, 0, 128, .45);

  --font-display: "Orbitron", "Rubik Mono One", sans-serif;
  --font-body: "JetBrains Mono", "Nunito", monospace;
  --font-mono: "JetBrains Mono", monospace;

  --transition-fast: 200ms cubic-bezier(.34, 1.56, .64, 1);
  --edge-cut: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

/* ---------- 2. BASE ---------- */
body {
  background: #000;
  background-image: none !important;
  font-family: var(--font-body);
}
.page-overlay {
  background:
    repeating-linear-gradient(0deg, rgba(0, 255, 65, .025) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .75) 50%, #000 95%);
}
h1, h2, h3, .hero-title, .section-label, .filters-header h2 {
  text-transform: uppercase;
}

/* ---------- 3. HERO PANTANO ---------- */
.hero {
  border-radius: 0;
  border-bottom: 2px solid var(--neon-green);
  box-shadow: 0 8px 50px rgba(0, 255, 65, .12);
}
.hero-bg { background: linear-gradient(180deg, #02100a, var(--swamp-deep) 70%, #04261c); }
#swampCanvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
.hero-overlay {
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .45) 60%, #000 100%);
}
.hero-title {
  color: var(--neon-green);
  text-shadow:
    0 0 8px rgba(0, 255, 65, .9),
    0 0 30px rgba(0, 255, 65, .55),
    0 0 80px rgba(0, 255, 65, .3),
    3px 3px 0 var(--neon-magenta);
  letter-spacing: .06em;
}
/* título líquido: distorsión SVG + brillo húmedo */
.hero-title.np-liquid {
  filter: url(#npLiquid) drop-shadow(0 0 14px rgba(0, 255, 65, .5)) drop-shadow(3px 3px 0 rgba(255, 0, 128, .85));
  background: linear-gradient(180deg, #b6ffc9 0%, var(--neon-green) 38%, #00a832 62%, #d6ffe0 78%, var(--neon-green) 100%);
  background-size: 100% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: npLiquidShine 6s ease-in-out infinite;
}
@keyframes npLiquidShine {
  0%, 100% { background-position: 50% 0%; }
  50% { background-position: 50% 100%; }
}
.hero-subtitle { color: var(--neon-yellow); text-shadow: 0 0 12px rgba(255, 255, 0, .5); }
.hero-stat {
  border-radius: 0;
  clip-path: var(--edge-cut);
  border: 1px solid var(--neon-green);
  background: rgba(0, 0, 0, .75);
}
.hero-stat-value { color: var(--neon-yellow); text-shadow: 0 0 10px rgba(255, 255, 0, .6); }
.scroll-hint { color: var(--neon-green); }

/* ---------- 4. NAV / BOTONES / FILTROS ---------- */
.main-nav { border-radius: 0; border: 1px solid var(--border-glass); background: rgba(0, 0, 0, .8); }
.main-nav-tab { border-radius: 0; transition: all var(--transition-fast); letter-spacing: .08em; }
.main-nav-tab:hover { color: var(--neon-green); background: rgba(0, 255, 65, .08); box-shadow: inset 0 -2px 0 var(--neon-green); }
.main-nav-tab.active { background: var(--neon-green); color: #000; box-shadow: var(--glow-green); }
.main-nav-tab.active-marketplace { background: var(--neon-yellow); color: #000; box-shadow: var(--glow-yellow); }

.load-more-btn, .wallet-search-btn, .filters-toggle {
  border-radius: 0 !important;
  clip-path: var(--edge-cut);
  border: 2px solid var(--neon-yellow);
  color: var(--neon-yellow);
  background: transparent;
  transition: all var(--transition-fast);
}
.load-more-btn:hover, .wallet-search-btn:hover, .filters-toggle:hover {
  background: var(--neon-yellow);
  color: #000;
  box-shadow: var(--glow-yellow);
  transform: scale(1.04);
}
.load-more-btn:active, .wallet-search-btn:active { transform: scale(.95); }

.filter-chip, .mp-filter-chip {
  border-radius: 0;
  background: rgba(0, 0, 0, .7);
  border: 1px solid var(--border-glass);
  border-bottom: 2px solid var(--neon-green);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.filter-chip:focus-within, .filter-chip:has(:focus),
.mp-filter-chip:focus-within {
  border-color: var(--neon-yellow);
  border-bottom-color: var(--neon-yellow);
  box-shadow: 0 4px 16px rgba(255, 255, 0, .18);
}
.filters-panel:before {
  height: 2px;
  background: linear-gradient(90deg, var(--neon-green), var(--neon-yellow), var(--neon-magenta), var(--neon-cyan));
}
.filter-select option, .mp-filter-select option { background: #000; }
.filters-header h2, .section-label { color: var(--neon-green); text-shadow: 0 0 10px rgba(0, 255, 65, .4); }
.clear-filters { border-radius: 0; }

/* ---------- 5. CARDS BASE ---------- */
.card-frame {
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--color-dark-secondary);
  border: 1px solid #2a2a2a;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.card-frame:hover { transform: translateY(-6px); }
.card-frame:before { border-radius: 0 !important; }

/* COMMON */
.card-wrapper[data-rarity=common] .card-frame:hover {
  border-color: #555;
  box-shadow: 0 8px 24px rgba(255, 255, 255, .06);
}
/* UNCOMMON */
.card-wrapper[data-rarity=uncommon] .card-frame { border-color: rgba(0, 255, 65, .35); }
.card-wrapper[data-rarity=uncommon] .card-frame:hover { box-shadow: 0 0 18px rgba(0, 255, 65, .3); border-color: var(--neon-green); }
/* RARE */
.card-wrapper[data-rarity=rare] .card-frame { border-color: rgba(0, 240, 255, .5); }
.card-wrapper[data-rarity=rare] .card-frame:hover {
  box-shadow: 0 0 22px rgba(0, 240, 255, .45);
  border-color: var(--neon-cyan);
}
/* EPIC */
.card-wrapper[data-rarity=epic] .card-frame {
  border: 1px solid rgba(255, 0, 128, .6);
  background: linear-gradient(160deg, #140010, var(--color-dark-secondary) 50%);
}
.card-wrapper[data-rarity=epic] .card-frame:hover {
  border-color: var(--neon-magenta);
  box-shadow: 0 0 16px rgba(255, 0, 128, .5), 0 0 50px rgba(255, 0, 128, .2);
}
.card-wrapper[data-rarity=epic] .rarity-indicator { animation: npPulse 2.4s ease-in-out infinite; }

/* LEGENDARY: marco dorado animado + holo */
@property --np-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.card-wrapper[data-rarity=legendary] .card-frame {
  position: relative;
  border: 2px solid transparent;
  background:
    linear-gradient(#0d0a00, #0d0a00) padding-box,
    conic-gradient(from var(--np-angle), var(--gold), var(--neon-yellow), #7a5c00, var(--gold)) border-box;
  animation: npSpin 4s linear infinite;
}
.card-wrapper[data-rarity=legendary] .card-frame:hover {
  box-shadow: 0 0 22px rgba(255, 215, 0, .55), 0 0 70px rgba(255, 215, 0, .2);
}
.card-wrapper[data-rarity=legendary] .card-frame:after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 235, 130, .14) 48%, rgba(255, 255, 255, .22) 50%, rgba(255, 235, 130, .14) 52%, transparent 65%);
  background-size: 250% 250%;
  background-position: 120% 120%;
  pointer-events: none;
  transition: background-position .9s ease;
}
.card-wrapper[data-rarity=legendary] .card-frame:hover:after { background-position: -20% -20%; }

/* ULTRA LEGENDARY: trofeo magenta+oro */
.card-wrapper[data-rarity=ultra_legendary] { animation: cardReveal .5s ease forwards, npFloat 5s ease-in-out infinite; }
.card-wrapper[data-rarity=ultra_legendary] .card-frame {
  position: relative;
  border: 2px solid transparent;
  background:
    linear-gradient(160deg, #16000c, #0d0a00) padding-box,
    conic-gradient(from var(--np-angle), var(--neon-magenta), var(--gold), var(--neon-yellow), var(--neon-magenta)) border-box;
  animation: npSpin 3s linear infinite;
  box-shadow: 0 0 14px rgba(255, 0, 128, .35);
}
.card-wrapper[data-rarity=ultra_legendary] .card-frame:hover {
  box-shadow: 0 0 25px rgba(255, 0, 128, .7), 0 0 80px rgba(255, 215, 0, .3);
  transform: translateY(-8px) rotateX(4deg);
}
.card-wrapper[data-rarity=ultra_legendary] .card-frame:after {
  content: "✦";
  position: absolute; top: 8px; right: 10px;
  color: var(--gold);
  font-size: .9rem;
  text-shadow: 0 0 8px var(--gold), 0 0 20px var(--neon-magenta);
  animation: npTwinkle 1.8s ease-in-out infinite;
  pointer-events: none;
}
.card-wrapper[data-rarity=ultra_legendary] .card-title,
.card-wrapper[data-rarity=ultra_legendary] .rarity-label {
  text-shadow: 0 0 8px rgba(255, 0, 128, .8);
}

/* glows radiales por rareza */
.card-wrapper[data-rarity=uncommon]:hover .card-glow { background: radial-gradient(ellipse at center, rgba(0, 255, 65, .1), transparent 70%); }
.card-wrapper[data-rarity=rare]:hover .card-glow { background: radial-gradient(ellipse at center, rgba(0, 240, 255, .14), transparent 70%); }
.card-wrapper[data-rarity=epic]:hover .card-glow { background: radial-gradient(ellipse at center, rgba(255, 0, 128, .16), transparent 70%); }
.card-wrapper[data-rarity=legendary]:hover .card-glow { background: radial-gradient(ellipse at center, rgba(255, 215, 0, .16), transparent 70%); }
.card-wrapper[data-rarity=ultra_legendary]:hover .card-glow { background: radial-gradient(ellipse at center, rgba(255, 0, 128, .22), transparent 70%); }

/* badges de rareza */
.mp-rarity-badge { border-radius: 0; letter-spacing: .06em; }
.mp-rarity-badge.uncommon { color: var(--neon-green); background: rgba(0, 255, 65, .1); }
.mp-rarity-badge.rare { color: var(--neon-cyan); background: rgba(0, 240, 255, .1); }
.mp-rarity-badge.epic { color: var(--neon-magenta); background: rgba(255, 0, 128, .12); }
.mp-rarity-badge.legendary { color: var(--gold); background: rgba(255, 215, 0, .12); }
.mp-rarity-badge.ultra_legendary { color: #fff; background: linear-gradient(90deg, rgba(255, 0, 128, .35), rgba(255, 215, 0, .35)); text-shadow: 0 0 6px var(--neon-magenta); }

/* ---------- 6. MODALES / INPUTS ---------- */
.wallet-modal-content, .list-modal-content, .transfer-modal-content, .wallet-setup-content {
  border-radius: 0 !important;
  border: 1px solid var(--neon-green);
  box-shadow: 0 0 40px rgba(0, 255, 65, .15);
  background: rgba(0, 0, 0, .95);
}
input[type=text], input[type=number], textarea, .wallet-address-input, .wallet-seed-input, .list-price-input, .mp-filter-input {
  border-radius: 0 !important;
  background: rgba(0, 0, 0, .6) !important;
  border: none !important;
  border-bottom: 2px solid var(--neon-green) !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus, textarea:focus {
  border-bottom-color: var(--neon-yellow) !important;
  box-shadow: 0 6px 18px rgba(255, 255, 0, .15);
  outline: none;
}

/* ---------- 7. KEYFRAMES ---------- */
@keyframes npSpin { to { --np-angle: 360deg; } }
@keyframes npPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes npTwinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.75) rotate(20deg); } }
@keyframes npFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---------- 8. ACCESIBILIDAD & MOBILE ---------- */
@media (prefers-reduced-motion: reduce) {
  .card-wrapper, .card-frame, .rarity-indicator, .scroll-hint, .hero-title.np-liquid { animation: none !important; }
  .hero-title.np-liquid { filter: drop-shadow(0 0 14px rgba(0, 255, 65, .5)); }
  .card-frame:after { transition: none !important; }
  * { transition-duration: 1ms !important; }
}
@media (max-width: 768px) {
  .card-frame:hover { box-shadow: 0 0 12px rgba(0, 255, 65, .25) !important; }
  .card-wrapper[data-rarity=legendary] .card-frame,
  .card-wrapper[data-rarity=ultra_legendary] .card-frame { animation-duration: 6s; }
  .hero-title { text-shadow: 0 0 10px rgba(0, 255, 65, .6), 2px 2px 0 var(--neon-magenta); }
  .hero-title.np-liquid { filter: url(#npLiquid) drop-shadow(0 0 8px rgba(0, 255, 65, .45)); }
}