/* Global Styles - RETRO GAME EDITION */
body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(ellipse at top left, rgba(20, 0, 40, 0.8) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(0, 20, 40, 0.8) 0%, transparent 50%),
    radial-gradient(circle at center, rgba(10, 0, 20, 0.9) 0%, #050010 100%),
    linear-gradient(180deg, #000000 0%, #050010 20%, #0a0020 50%, #050010 80%, #000000 100%);
  color: #00FFFF;
  font-family: 'Courier New', monospace;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 40px 20px;
  position: relative;
  overflow-x: hidden;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
  animation: backgroundPulse 15s ease-in-out infinite alternate;
}

@keyframes backgroundPulse {
  0% {
    background-position: 0% 0%, 100% 100%, center, 0% 0%;
  }
  100% {
    background-position: 10% 10%, 90% 90%, center, 0% 100%;
  }
}

/* Dashboard Container - RETRO ARCADE STYLE WITH MARIO/DK PATTERNS */
.dashboard {
  width: 100%;
  max-width: 900px;
  background:
    /* Arcade ladder pattern (like Donkey Kong) */
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 8px,
      rgba(255, 255, 0, 0.03) 8px,
      rgba(255, 255, 0, 0.03) 10px,
      transparent 10px,
      transparent 30px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 20px,
      rgba(255, 0, 255, 0.02) 20px,
      rgba(255, 0, 255, 0.02) 22px
    ),
    /* Platform blocks pattern (like Mario platforms) */
    repeating-linear-gradient(
      45deg,
      rgba(0, 255, 255, 0.02) 0px,
      rgba(0, 255, 255, 0.02) 10px,
      transparent 10px,
      transparent 20px
    ),
    /* Brick pattern */
    repeating-linear-gradient(
      0deg,
      rgba(255, 100, 0, 0.03) 0px,
      rgba(255, 100, 0, 0.03) 15px,
      rgba(200, 80, 0, 0.03) 15px,
      rgba(200, 80, 0, 0.03) 30px
    ),
    /* Base gradient */
    linear-gradient(135deg, rgba(5,0,20,0.95) 0%, rgba(10,0,30,0.95) 100%);
  border: 3px solid #00FFFF;
  border-radius: 8px;
  padding: 30px;
  box-shadow:
    0 0 20px rgba(0, 255, 255, 0.5),
    0 0 40px rgba(255, 0, 255, 0.3),
    inset 0 0 60px rgba(0, 255, 255, 0.05);
  text-align: center;
  position: relative;
  z-index: 1;
  animation: arcadeBoxPulse 4s ease-in-out infinite;
  overflow: hidden;
}

/* Space Invaders Canvas inside Dashboard */
#dashboardGameCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  border-radius: 8px;
}

/* Ensure all dashboard content appears above the game canvas */
.dashboard > *:not(#dashboardGameCanvas) {
  position: relative;
  z-index: 1;
}

/* Subtle pulse animation for arcade feel */
@keyframes arcadeBoxPulse {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(0, 255, 255, 0.5),
      0 0 40px rgba(255, 0, 255, 0.3),
      inset 0 0 60px rgba(0, 255, 255, 0.05);
  }
  50% {
    box-shadow:
      0 0 30px rgba(0, 255, 255, 0.6),
      0 0 50px rgba(255, 0, 255, 0.4),
      inset 0 0 70px rgba(0, 255, 255, 0.08);
  }
}

/* Pixel corners effect */
.dashboard::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(45deg,
    #00FFFF 0%,
    #FF00FF 25%,
    #FFFF00 50%,
    #00FF00 75%,
    #00FFFF 100%);
  border-radius: 8px;
  z-index: -1;
  opacity: 0.3;
  animation: borderGlow 3s linear infinite;
}

@keyframes borderGlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* Headings - ARCADE STYLE */
h1 {
  font-size: 2em;
  margin-bottom: 0.2em;
  color: #FFFF00;
  text-shadow:
    0 0 10px #FFFF00,
    0 0 20px #FF00FF,
    2px 2px 0px #FF00FF,
    4px 4px 0px rgba(0,0,0,0.5);
  letter-spacing: 2px;
  animation: titlePulse 2s ease-in-out infinite;
  position: relative;
}

/* "INSERT COIN" Easter egg that appears on title hover */
h1::after {
  content: 'INSERT COIN';
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.3em;
  color: #FFD700;
  text-shadow: 0 0 10px #FFD700, 0 0 20px #FFA500;
  opacity: 0;
  transition: opacity 0.3s;
  animation: blinkInsertCoin 1s ease-in-out infinite;
  pointer-events: none;
}

h1:hover::after {
  opacity: 1;
}

@keyframes blinkInsertCoin {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes titlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

h2 {
  font-size: 1.3em;
  color: #00FFFF;
  margin-bottom: 1em;
  text-shadow:
    0 0 8px #00FFFF,
    0 0 15px rgba(0, 255, 255, 0.5);
}

.contract {
  color: #bbb;
  font-size: 0.9em;
}

/* Stats Grid */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 30px;
}

.stat {
  background: linear-gradient(135deg, rgba(0,20,40,0.8) 0%, rgba(20,0,40,0.8) 100%);
  border: 2px solid #00FFFF;
  border-radius: 4px;
  padding: 12px;
  transition: all 0.3s;
  box-shadow:
    0 0 10px rgba(0, 255, 255, 0.3),
    inset 0 0 20px rgba(0, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}

.stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent);
  transition: left 0.5s;
}

.stat:hover::before {
  left: 100%;
}

.stat:hover {
  border-color: #FFFF00;
  box-shadow:
    0 0 15px rgba(255, 255, 0, 0.6),
    0 0 30px rgba(255, 0, 255, 0.3);
  transform: translateY(-2px);
}

.label {
  display: block;
  font-size: 0.9em;
  color: #FF00FF;
  margin-bottom: 4px;
  text-shadow: 0 0 5px rgba(255, 0, 255, 0.8);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stat span, .stat a {
  color: #00FF00;
  text-decoration: none;
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
  font-weight: bold;
}

/* Treasury - RETRO ARCADE */
.treasury {
  margin-top: 40px;
  background: linear-gradient(135deg, rgba(0,30,60,0.6) 0%, rgba(60,0,60,0.6) 100%);
  border: 3px solid #00FFFF;
  border-radius: 8px;
  padding: 20px;
  box-shadow:
    0 0 20px rgba(0, 255, 255, 0.4),
    inset 0 0 40px rgba(0, 255, 255, 0.05);
}

.treasury h3 {
  margin-top: 0;
  color: #FFFF00;
  text-shadow:
    0 0 10px rgba(255, 255, 0, 0.8),
    2px 2px 0px #FF00FF;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.treasury-values {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: 1.1em;
  margin-top: 10px;
}

/* === Dopamine Progress Glow === */
.progress-fill {
  height: 100%;
  width: 0%;
  transition: width 1.2s ease-in-out, background 1s linear, box-shadow 1s ease-in-out;
  background: linear-gradient(90deg, #ff4fd8, #ff82e4);
  box-shadow: 0 0 20px #ff4fd880;
  border-radius: 10px;
}

/* Active glowing state */
.progress-fill.glow {
  animation: glowPulse 2s infinite alternate ease-in-out;
}

/* Pulse animation for near-complete state */
@keyframes glowPulse {
  0% {
    box-shadow: 0 0 20px #14F195, 0 0 40px #14F195, 0 0 60px #14F195;
    background: linear-gradient(90deg, #14F195, #9945FF);
  }
  100% {
    box-shadow: 0 0 25px #14F195, 0 0 70px #14F195, 0 0 100px #9945FF;
    background: linear-gradient(90deg, #9945FF, #14F195);
  }
}

/* Smooth percentage text animation */
#progress-percent {
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 8px #ff4fd8, 0 0 15px #ff82e4;
  transition: color 1s ease-in-out, text-shadow 1s ease-in-out;
}

/* When near goal, make text flash Solana glow */
#progress-percent.surge {
  color: #14F195;
  text-shadow: 0 0 10px #14F195, 0 0 20px #9945FF;
}

/* Progress container pop */
.progress-section {
  box-shadow: 0 0 40px #ff4fd820, inset 0 0 20px #ff4fd810;
  transition: box-shadow 0.6s ease-in-out;
}

.progress-section.active {
  box-shadow: 0 0 50px #14F19550, inset 0 0 30px #9945FF30;
}

/* === RETRO ARCADE Progress Section === */
.progress-section {
  width: 100%;
  max-width: 520px;
  margin: 30px auto;
  padding: 25px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(0, 50, 100, 0.1),
      rgba(0, 50, 100, 0.1) 10px,
      rgba(100, 0, 100, 0.1) 10px,
      rgba(100, 0, 100, 0.1) 20px
    ),
    linear-gradient(135deg, rgba(0, 30, 60, 0.6) 0%, rgba(60, 0, 60, 0.6) 100%);
  border: 3px solid #FF00FF;
  box-shadow:
    0 0 30px rgba(255, 0, 255, 0.4),
    inset 0 0 40px rgba(255, 0, 255, 0.1);
  text-align: center;
  color: #00FFFF;
  overflow: hidden;
  position: relative;
  transition: all 0.6s ease-in-out;
}

/* Glowing effect when active */
.progress-section.active {
  border-color: #00FFFF;
  box-shadow:
    0 0 50px rgba(0, 255, 255, 0.8),
    0 0 100px rgba(255, 255, 0, 0.4),
    inset 0 0 60px rgba(0, 255, 255, 0.2);
  transform: scale(1.03);
  animation: progressGlow 1s ease-in-out infinite;
}

@keyframes progressGlow {
  0%, 100% {
    box-shadow:
      0 0 50px rgba(0, 255, 255, 0.8),
      0 0 100px rgba(255, 255, 0, 0.4),
      inset 0 0 60px rgba(0, 255, 255, 0.2);
  }
  50% {
    box-shadow:
      0 0 70px rgba(0, 255, 255, 1),
      0 0 140px rgba(255, 255, 0, 0.6),
      inset 0 0 80px rgba(0, 255, 255, 0.3);
  }
}

/* === Progress Bar Container - RETRO ARCADE === */
.progress-bar {
  width: 100%;
  height: 24px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.5) 0px,
      rgba(0, 0, 0, 0.5) 2px,
      rgba(255, 255, 255, 0.05) 2px,
      rgba(255, 255, 255, 0.05) 4px
    );
  border: 2px solid #00FFFF;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  margin-top: 15px;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(0, 255, 255, 0.3);
}

/* === The Retro Progress Fill === */
.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    #FF00FF 0%,
    #00FFFF 50%,
    #00FF00 100%
  );
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  transition: width 1.5s ease-in-out, box-shadow 1s ease-in-out, background 1.2s ease-in-out;
  box-shadow:
    0 0 20px rgba(255, 0, 255, 0.6),
    inset 0 0 10px rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.5);
}

/* === Liquid Ripple Overlay === */
.progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.25) 0px,
    rgba(255, 255, 255, 0.1) 10px,
    transparent 20px,
    transparent 30px
  );
  animation: liquidFlow 3.5s linear infinite;
  opacity: 0.7;
}

/* === Glow & Pulse Animations === */
.progress-fill.glow {
  animation: solanaGlow 2.5s infinite alternate ease-in-out;
}

@keyframes solanaGlow {
  0% {
    box-shadow: 0 0 30px #14F195, 0 0 60px #9945FF;
  }
  100% {
    box-shadow: 0 0 60px #14F195, 0 0 120px #9945FF;
  }
}

@keyframes liquidFlow {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* === Progress Text - RETRO === */
#progress-percent {
  margin-top: 15px;
  font-weight: bold;
  font-size: 1.3em;
  letter-spacing: 2px;
  color: #FFFF00;
  text-shadow:
    0 0 10px rgba(255, 255, 0, 0.8),
    2px 2px 0px #FF00FF,
    4px 4px 0px rgba(0, 0, 0, 0.5);
  transition: all 1s ease-in-out;
  text-transform: uppercase;
}

#progress-percent.surge {
  color: #00FFFF;
  text-shadow:
    0 0 15px rgba(0, 255, 255, 1),
    0 0 30px rgba(255, 255, 0, 0.8),
    2px 2px 0px #00FF00;
  animation: textBlink 0.5s ease-in-out infinite;
}

@keyframes textBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* === Info Text - RETRO === */
#need-sol, #missing-sol {
  color: #00FF00;
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.8);
  font-weight: bold;
}

.progress-section p {
  font-size: 0.95rem;
  line-height: 1.4em;
  color: #00FFFF;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.4);
}

.progress-section h3 {
  color: #FFFF00;
  text-shadow:
    0 0 10px rgba(255, 255, 0, 0.8),
    2px 2px 0px #FF00FF;
  text-transform: uppercase;
  letter-spacing: 2px;
}


/* force the preview area to only fit the card */
#next-nft-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  width: 100%;
}

/* card sizing fix */
#next-nft-preview .nft-card {
  width: 180px;
  max-width: 180px;
  background: rgba(255, 79, 216, 0.05);
  border: 1px solid #ff4fd8;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
}

/* shrink if container tries to expand it */
#next-nft-preview .nft-card img {
  width: 160px !important;
  height: 160px !important;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
}

/* text formatting */
#next-nft-preview .nft-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#next-nft-preview .nft-name {
  font-weight: bold;
  font-family: 'Courier New', monospace;
  color: #ff4fd8;
  font-size: 0.9rem;
  margin: 0;
}

#next-nft-preview .nft-price {
  font-family: 'Courier New', monospace;
  color: #ff9de5;
  font-size: 0.85rem;
  margin: 0;
}



/* Gallery - RETRO ARCADE */
.gallery {
  margin-top: 50px;
  padding-top: 20px;
  border-top: 3px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 -3px 15px rgba(0, 255, 255, 0.2);
}

.gallery h3 {
  color: #00FFFF;
  margin-bottom: 10px;
  text-shadow:
    0 0 10px rgba(0, 255, 255, 0.8),
    2px 2px 0px #FF00FF;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#nft-upload {
  display: block;
  margin: 10px auto 20px;
  color: #000;
  background: linear-gradient(135deg, #FFFF00 0%, #FF00FF 100%);
  border: 3px solid #00FFFF;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow:
    0 0 10px rgba(255, 255, 0, 0.5),
    0 4px 0 rgba(0,0,0,0.3);
  transition: all 0.2s;
  position: relative;
  top: 0;
}

#nft-upload:hover {
  background: linear-gradient(135deg, #00FFFF 0%, #00FF00 100%);
  box-shadow:
    0 0 20px rgba(0, 255, 255, 0.8),
    0 2px 0 rgba(0,0,0,0.3);
  top: 2px;
}

#nft-upload:active {
  top: 4px;
  box-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 15px;
  justify-items: center;
}

.gallery-grid img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid #ff4fd840;
  transition: all 0.3s;
}

.gallery-grid img:hover {
  border-color: #ff4fd8;
  box-shadow: 0 0 15px #ff4fd8;
}

/* Small screens */
@media (max-width: 600px) {
  .dashboard {
    padding: 20px;
  }
  h1 {
    font-size: 1.6em;
  }
  .stat {
    padding: 10px;
  }
}

/* Align title + logo */
.gallery-header {
  display: flex;
  align-items: center;
  justify-content: center; /* centers both horizontally */
  gap: 10px;
  margin-bottom: 10px;
}

/* Smaller Magic Eden logo */
.magic-eden-logo {
  width: 15px;   /* make it smaller */
  height: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.magic-eden-logo:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px #ff4fd8);
}

.magic-eden-logo {
  width: 15px;
  height: 30px;
}

/* --- Project Description Block --- */
.project-description {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255, 79, 216, 0.08);
  border: 1px solid rgba(255, 79, 216, 0.4);
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 12px;
  box-shadow: 0 0 12px rgba(255, 79, 216, 0.2);
}

.project-description p {
  color: #ffbdf5;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

.project-description strong {
  color: #ff4fd8;
}

.project-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px #ff4fd8);
  border-radius: 50%;
}

/* === NFT Gallery Grid === */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 10px;
  padding-bottom: 50px;
}

/* === NFT Card - RETRO ARCADE === */
.nft-card {
  background:
    linear-gradient(135deg, rgba(0,50,100,0.3) 0%, rgba(100,0,100,0.3) 100%);
  border: 3px solid #FF00FF;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  transition: all 0.3s;
  box-shadow:
    0 0 15px rgba(255, 0, 255, 0.4),
    inset 0 0 20px rgba(255, 0, 255, 0.1);
  position: relative;
}

.nft-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.02) 10px,
    rgba(255, 255, 255, 0.02) 20px
  );
  pointer-events: none;
}

.nft-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: #00FFFF;
  box-shadow:
    0 0 25px rgba(0, 255, 255, 0.8),
    0 0 50px rgba(255, 0, 255, 0.4),
    inset 0 0 30px rgba(0, 255, 255, 0.15);
  cursor: pointer;
}

.nft-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
}

.nft-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nft-name {
  font-weight: bold;
  font-family: 'Courier New', monospace;
  color: #FFFF00;
  font-size: 0.9rem;
  margin: 0;
  text-shadow: 0 0 8px rgba(255, 255, 0, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nft-price {
  font-family: 'Courier New', monospace;
  color: #00FF00;
  font-size: 0.85rem;
  margin: 0;
  text-shadow: 0 0 6px rgba(0, 255, 0, 0.8);
  font-weight: bold;
}

.view-btn {
  display: inline-block;
  background: linear-gradient(135deg, #00FFFF, #00FF00);
  color: #000 !important;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  border: 3px solid #FFFF00;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow:
    0 0 15px rgba(0, 255, 255, 0.6),
    0 4px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  text-align: center;
  position: relative;
  top: 0;
  overflow: hidden;
}

.view-btn:hover {
  background: linear-gradient(135deg, #FFFF00, #FF00FF);
  border-color: #00FFFF;
  box-shadow:
    0 0 25px rgba(255, 255, 0, 0.8),
    0 2px 0 rgba(0, 0, 0, 0.3);
  top: 2px;
}

.view-btn:active {
  top: 4px;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
}

.buy-hint {
  text-align: center;
  color: #00FFFF;
  font-size: 0.9rem;
  margin-top: 6px;
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
  font-weight: bold;
  text-transform: uppercase;
}

.nft-card:hover .buy-hint {
  opacity: 1;
  transform: scale(1.1);
  color: #FFFF00;
  text-shadow: 0 0 15px rgba(255, 255, 0, 0.9);
  animation: blinkHint 0.5s ease-in-out infinite;
}

@keyframes blinkHint {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* === Delete (X) button for NFTs === */
.delete-x {
  position: absolute;
  top: 6px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #ff4fd8;
  font-weight: bold;
  font-size: 1rem;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 5;
}

.nft-card {
  position: relative; /* make sure delete-x is positioned relative to card */
}

.nft-card:hover .delete-x {
  opacity: 1;
  transform: scale(1.1);
}

.delete-x:hover {
  background: #ff4fd8;
  color: #fff;
  transform: scale(1.2);
  box-shadow: 0 0 8px #ff4fd8;
}


#Treasury {
  color: #ff4fd8;
  font-weight: bold;
  text-decoration: none;
  transition: text-shadow 0.2s ease, transform 0.2s ease;
}

#Treasury:hover {
  text-shadow: 0 0 10px #ff4fd8;
  transform: scale(1.05);
}

#gecko-frame {
  transition: opacity 0.8s ease;
}

/* === Sold Gallery Styling - RETRO ARCADE === */
.sold-gallery {
  margin-top: 50px;
  padding-top: 20px;
  border-top: 3px solid rgba(0, 255, 0, 0.3);
  box-shadow: 0 -3px 15px rgba(0, 255, 0, 0.2);
}

.sold-gallery h3 {
  color: #00FF00;
  text-shadow:
    0 0 10px rgba(0, 255, 0, 0.8),
    2px 2px 0px #FFFF00;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.sold-gallery .nft-card {
  background: linear-gradient(135deg, rgba(0,50,0,0.3) 0%, rgba(0,100,50,0.3) 100%);
  border: 3px solid #00FF00;
  box-shadow:
    0 0 15px rgba(0, 255, 0, 0.4),
    inset 0 0 20px rgba(0, 255, 0, 0.1);
}

.sold-gallery .nft-card:hover {
  border-color: #FFFF00;
  box-shadow:
    0 0 25px rgba(255, 255, 0, 0.6),
    0 0 50px rgba(0, 255, 0, 0.4),
    inset 0 0 30px rgba(255, 255, 0, 0.15);
}

.sold-gallery .nft-name {
  color: #00FF00;
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.8);
}

.sold-gallery .nft-price {
  color: #FFFF00;
  text-shadow: 0 0 6px rgba(255, 255, 0, 0.8);
}

.sold-gallery .buy-hint {
  color: #00FF00;
  font-size: 0.85em;
  margin-top: 5px;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.6);
}

   /* --- Developer Panel - RETRO ARCADE --- */
    #dev-panel {
      position: fixed;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
      background:
        linear-gradient(135deg, rgba(0,50,100,0.2) 0%, rgba(100,0,100,0.2) 100%);
      border: 3px solid #00FFFF;
      border-radius: 4px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: left 0.4s ease, background 0.3s;
      z-index: 9999;
      box-shadow:
        0 0 20px rgba(0, 255, 255, 0.4),
        inset 0 0 30px rgba(0, 255, 255, 0.05);
    }

    #dev-panel::after {
      content: "⚙️";
      position: absolute;
      right: -30px;
      top: 50%;
      transform: translateY(-50%);
      background: linear-gradient(135deg, #FFFF00, #FF00FF);
      color: #000;
      padding: 6px 8px;
      border: 2px solid #00FFFF;
      border-radius: 0 4px 4px 0;
      font-size: 14px;
      cursor: pointer;
      box-shadow: 0 0 15px rgba(255, 255, 0, 0.6);
    }

    #dev-panel:hover {
      left: 10px;
      background:
        linear-gradient(135deg, rgba(0,100,150,0.3) 0%, rgba(150,0,150,0.3) 100%);
      box-shadow:
        0 0 30px rgba(0, 255, 255, 0.6),
        inset 0 0 40px rgba(0, 255, 255, 0.1);
    }

    .dev-btn {
      background: linear-gradient(135deg, #FF00FF, #00FFFF);
      border: 2px solid #FFFF00;
      color: #000;
      font-weight: bold;
      border-radius: 4px;
      padding: 6px 10px;
      cursor: pointer;
      font-family: 'Courier New', monospace;
      text-transform: uppercase;
      box-shadow:
        0 0 10px rgba(255, 0, 255, 0.5),
        0 3px 0 rgba(0, 0, 0, 0.3);
      transition: all 0.2s;
      position: relative;
      top: 0;
      overflow: hidden;
    }

    /* Scanline overlay on buttons */
    .dev-btn::before,
    #connect-wallet-btn::before,
    #follow-x-btn::before,
    .view-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.1) 2px,
        rgba(0, 0, 0, 0.1) 4px
      );
      pointer-events: none;
      z-index: 1;
    }

    .dev-btn:hover {
      background: linear-gradient(135deg, #FFFF00, #00FF00);
      border-color: #FF00FF;
      box-shadow:
        0 0 15px rgba(255, 255, 0, 0.7),
        0 1px 0 rgba(0, 0, 0, 0.3);
      top: 2px;
    }

    .dev-btn:active {
      top: 3px;
      box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
    }

    /* --- Chart Styling --- */
    #tradingview-chart {
      margin-top: 40px;
      width: 100%;
      height: 500px;
      border: 1px solid #ff4fd8;
      border-radius: 10px;
      overflow: hidden;
    }

    /* --- RETRO GAME BACKGROUND WITH STATIC TV (Optimized) --- */
    #orbCanvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: -1;
      background: transparent; /* Made transparent so video shows through */
      pointer-events: none;
      animation: crtFlicker 0.15s infinite;
      will-change: opacity;
      transform: translateZ(0); /* Enable hardware acceleration */
    }

    /* === STATIC TV NOISE OVERLAY (Optimized) === */
    #orbCanvas::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image:
        repeating-linear-gradient(
          0deg,
          transparent,
          transparent 2px,
          rgba(255, 255, 255, 0.02) 2px,
          rgba(255, 255, 255, 0.02) 4px
        );
      animation: staticNoise 0.3s steps(8) infinite;
      opacity: 0.2;
      will-change: transform;
    }

    @keyframes staticNoise {
      0% { transform: translateY(0) translateX(0); }
      10% { transform: translateY(-5%) translateX(5%); }
      20% { transform: translateY(-10%) translateX(0%); }
      30% { transform: translateY(-15%) translateX(-5%); }
      40% { transform: translateY(-20%) translateX(10%); }
      50% { transform: translateY(-25%) translateX(0%); }
      60% { transform: translateY(-30%) translateX(-10%); }
      70% { transform: translateY(-35%) translateX(5%); }
      80% { transform: translateY(-40%) translateX(0%); }
      90% { transform: translateY(-45%) translateX(-5%); }
      100% { transform: translateY(-50%) translateX(0%); }
    }

    /* === TV SCANLINE DISTORTION === */
    #orbCanvas::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
      );
      animation: tvRoll 8s linear infinite;
      pointer-events: none;
    }

    @keyframes tvRoll {
      0% { transform: translateY(0); }
      100% { transform: translateY(-100%); }
    }

    /* CRT Screen flicker effect */
    @keyframes crtFlicker {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.98; }
    }

    /* Vignette overlay for CRT effect */
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.5) 100%);
      pointer-events: none;
      z-index: 9998;
    }

    /* Scanline overlay */
    body::after {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: repeating-linear-gradient(
        0deg,
        rgba(0, 255, 0, 0.02) 0px,
        transparent 2px,
        transparent 4px,
        rgba(0, 255, 0, 0.02) 4px
      );
      pointer-events: none;
      z-index: 9998;
      animation: scanlineMove 10s linear infinite;
    }

    @keyframes scanlineMove {
      0% { transform: translateY(0); }
      100% { transform: translateY(4px); }
    }

    /* --- Magic Eden Logo --- */
    .magic-eden-logo {
      display: block;
      margin: 20px auto;
      width: 30px;
      transition: transform 0.3s ease, filter 0.3s ease;
    }

    .magic-eden-logo:hover {
      transform: scale(1.1);
      filter: drop-shadow(0 0 8px #ff4fd8);
    }

    /* --- NFT Gallery Grid --- */
    .gallery-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 10px;
    }



   /* --- Follow X Button - RETRO ARCADE --- */
#follow-x-container {
  position: fixed;
  top: 15px;
  left: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

#follow-x-btn {
  background: linear-gradient(135deg, #FF00FF, #00FFFF);
  color: #000;
  font-weight: bold;
  border: 3px solid #FFFF00;
  border-radius: 4px;
  padding: 8px 16px;
  font-family: 'Courier New', monospace;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow:
    0 0 15px rgba(255, 0, 255, 0.6),
    0 4px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  position: relative;
  top: 0;
  overflow: hidden;
}

#follow-x-btn:hover {
  background: linear-gradient(135deg, #FFFF00, #00FF00);
  border-color: #00FFFF;
  box-shadow:
    0 0 25px rgba(255, 255, 0, 0.8),
    0 2px 0 rgba(0, 0, 0, 0.3);
  top: 2px;
}

#follow-x-btn:active {
  top: 4px;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.6);
}

.aesthetic-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #ffbdf0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  cursor: not-allowed;
  opacity: 0.8;
  transition: all 0.3s ease;
  margin-left: 2px;
}

.aesthetic-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  opacity: 1;
}

/* === Live Lobby Button - RETRO ARCADE STYLE === */
.lobby-btn {
  background: linear-gradient(135deg, #00FF00, #00FFFF);
  color: #000;
  font-weight: bold;
  border: 3px solid #FFFF00;
  border-radius: 4px;
  padding: 8px 16px;
  font-family: 'Courier New', monospace;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow:
    0 0 15px rgba(0, 255, 0, 0.6),
    0 4px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  position: relative;
  top: 0;
  overflow: hidden;
  margin-top: 8px;
  font-size: 0.9rem;
  animation: lobbyPulse 3s ease-in-out infinite;
}

@keyframes lobbyPulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.6), 0 4px 0 rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 25px rgba(0, 255, 0, 0.9), 0 4px 0 rgba(0, 0, 0, 0.3), 0 0 35px rgba(255, 255, 0, 0.5);
  }
}

.lobby-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.1) 2px,
    rgba(0, 0, 0, 0.1) 4px
  );
  pointer-events: none;
  z-index: 1;
}

.lobby-btn:hover {
  background: linear-gradient(135deg, #FFFF00, #FF00FF);
  border-color: #00FFFF;
  box-shadow:
    0 0 30px rgba(255, 255, 0, 0.9),
    0 2px 0 rgba(0, 0, 0, 0.3),
    0 0 45px rgba(255, 0, 255, 0.6);
  top: 2px;
  transform: scale(1.05);
}

.lobby-btn:active {
  top: 4px;
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
}

    /* --- Phantom Connect Button - RETRO ARCADE --- */
    #wallet-connect-container {
      position: fixed;
      top: 15px;
      right: 20px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
    }

    #connect-wallet-btn {
      background: linear-gradient(135deg, #00FFFF, #00FF00);
      color: #000;
      font-weight: bold;
      border: 3px solid #FF00FF;
      border-radius: 4px;
      padding: 8px 16px;
      font-family: 'Courier New', monospace;
      cursor: pointer;
      text-transform: uppercase;
      box-shadow:
        0 0 15px rgba(0, 255, 255, 0.6),
        0 4px 0 rgba(0, 0, 0, 0.3);
      transition: all 0.2s ease;
      position: relative;
      top: 0;
      overflow: hidden;
    }

    #connect-wallet-btn:hover {
      background: linear-gradient(135deg, #FFFF00, #FF00FF);
      border-color: #00FFFF;
      box-shadow:
        0 0 25px rgba(255, 255, 0, 0.8),
        0 2px 0 rgba(0, 0, 0, 0.3);
      top: 2px;
    }

    #connect-wallet-btn:active {
      top: 4px;
      box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
    }

    #wallet-address-display {
      color: #00FF00;
      font-family: 'Courier New', monospace;
      font-size: 0.85rem;
      text-shadow: 0 0 8px rgba(0, 255, 0, 0.8);
      font-weight: bold;
    }

/* --- Responsive Adjustments --- */
@media (max-width: 900px) {
  .dashboard {
    padding: 20px;
    width: 95%;
  }

  .stats {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  #tradingview-chart {
    height: 400px;
  }
}

@media (max-width: 768px) {
  body {
    flex-direction: column;
    align-items: stretch;
    padding: 20px 10px;
  }

  .dashboard {
    padding: 16px;
    border-radius: 14px;
  }

  h1 {
    font-size: 1.6rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  .treasury-values {
    flex-direction: column;
    gap: 10px;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
  }

  #wallet-connect-container,
  #follow-x-container {
    position: static;
    margin: 10px auto;
    align-items: center;
    text-align: center;
  }

  #connect-wallet-btn,
  #follow-x-btn {
    width: 100%;
    max-width: 240px;
  }

  #dev-panel {
    position: static;
    transform: none;
    margin: 20px auto 0;
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.3rem;
  }

  h2 {
    font-size: 1.1rem;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .nft-card {
    width: 100%;
    padding: 8px;
  }

  .nft-img {
    height: 120px;
  }

  #next-nft-preview .nft-card {
    width: 140px;
  }

  #tradingview-chart {
    height: 250px;
  }
}

/* --- Prevent horizontal scroll --- */
html, body {
  overflow-x: hidden;
  background: #0a0a0a;
  min-height: 100%;
}

html {
  height: 100%;
}

/* --- Improve button tap size --- */
button, .view-btn, .dev-btn, #connect-wallet-btn, #follow-x-btn {
  min-height: 44px; /* better for mobile tapping */
}


/* --- Fix layout overflow and text wrapping for mobile --- */
@media (max-width: 768px) {
  /* Ensure all major sections stay inside the dashboard */
  .dashboard, 
  .treasury,
  .progress-section,
  .gallery,
  .sold-gallery {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    word-wrap: break-word;
  }

  /* Fix Treasury section */
  .treasury-values {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  /* Ensure long wallet address doesn’t overflow */
  .treasury p,
  .contract,
  #Treasury {
    word-break: break-all;
    overflow-wrap: anywhere;
    text-align: center;
  }

  /* Fix Progress section */
  .progress-section {
    padding: 16px;
    max-width: 100%;
  }

  #progress-percent {
    font-size: 1rem;
  }

  .progress-bar {
    height: 18px;
  }

  /* Keep NFT cards in the box */
  .gallery-grid, .sold-gallery .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    justify-items: center;
  }

  .nft-card {
    width: 100%;
    max-width: 160px;
  }

  .nft-img {
    height: 120px;
  }

  /* Ensure text doesn’t overflow on small screens */
  h1, h2, h3, p, span, a {
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  /* Ensure progress & treasury sections center nicely */
  .progress-section,
  .treasury {
    margin-left: auto;
    margin-right: auto;
  }

  /* Center headings for readability */
  h1, h2, h3 {
    text-align: center;
  }
}

@media (max-width: 480px) {
  /* Make sure small phones handle text gracefully */
  .dashboard {
    padding: 12px;
  }

  h1 {
    font-size: 1.2rem;
  }

  h2 {
    font-size: 1rem;
  }

  .progress-section {
    padding: 12px;
  }

  .nft-card {
    max-width: 140px;
  }

  .treasury-values {
    font-size: 0.9rem;
  }
}