/* Base Styles */
:root {
  --pokemon-red: #ff0000;
  --pokemon-dark-red: #cc0000;
  --pokemon-blue: #3b4cca;
  --pokemon-yellow: #ffde00;
  --pokemon-gold: #b3a125;
  --pokemon-black: #1a1a1a;
  --pokemon-white: #f0f0f0;
  --pokemon-gray: #616161;
  --pokemon-light-gray: #9c9c9c;
  --gameboy-green: #8bac0f;
  --gameboy-dark-green: #306230;
  --gameboy-light-green: #9bbc0f;
  --gameboy-bg: #0f380f;
  --charizard-orange: #ff7327;
  --charizard-red: #ff3700;
  --charizard-yellow: #ffd76f;
  --fire-red: #ff4500;
  --fire-orange: #ff7800;
  --fire-yellow: #ffcc00;
}

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

body {
  font-family: "Press Start 2P", cursive;
  background-color: var(--gameboy-bg);
  color: var(--pokemon-white);
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

/* Animated Background */
.animated-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  background-color: var(--gameboy-bg);
  background-image: linear-gradient(rgba(155, 188, 15, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155, 188, 15, 0.1) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* Remove the fire-particles and pokeball-particles styles since we're replacing them */
.fire-particles,
.pokeball-particles {
  display: none;
}

/* Add this new style for the Game Boy background pattern */
.gameboy-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(155, 188, 15, 0.2) 2px, transparent 2px);
  background-size: 32px 32px;
  background-position: 0 0;
  animation: scrollPattern 60s infinite linear;
}

@keyframes scrollPattern {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 100px;
  }
}

/* Game Boy Frame */
.gameboy-frame {
  background-color: #c4cfa1;
  border-radius: 10px 10px 50px 10px;
  padding: 20px;
  box-shadow: 0 0 0 5px #8b956d, 0 0 20px rgba(0, 0, 0, 0.5);
  max-width: 95vw;
  width: 800px;
  margin: 0 auto;
  position: relative;
}

.gameboy-screen {
  background-color: var(--gameboy-bg);
  border-radius: 5px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  min-height: 600px;
}

/* Loading Screen */
.loading-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--gameboy-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 100;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.loading-pokeball {
  width: 80px;
  height: 80px;
  background: linear-gradient(
    to bottom,
    var(--pokemon-red) 0%,
    var(--pokemon-red) 50%,
    var(--pokemon-white) 50%,
    var(--pokemon-white) 100%
  );
  border-radius: 50%;
  position: relative;
  animation: rotate 2s infinite linear;
  margin-bottom: 20px;
}

.loading-pokeball::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: var(--pokemon-black);
  transform: translateY(-50%);
}

.loading-pokeball::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: var(--pokemon-white);
  border: 5px solid var(--pokemon-black);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 16px;
  color: var(--gameboy-light-green);
  margin-bottom: 20px;
  animation: blink 1s infinite;
}

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

.loading-bar-container {
  width: 200px;
  height: 20px;
  background-color: var(--gameboy-dark-green);
  border: 3px solid var(--gameboy-light-green);
  position: relative;
}

.loading-bar {
  height: 100%;
  width: 0;
  background-color: var(--gameboy-light-green);
  animation: loadingProgress 3s forwards;
}

@keyframes loadingProgress {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

/* Game Content */
.game-content {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

/* Navigation */
.game-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}

.nav-pokeball {
  width: 30px;
  height: 30px;
  background: linear-gradient(
    to bottom,
    var(--pokemon-red) 0%,
    var(--pokemon-red) 50%,
    var(--pokemon-white) 50%,
    var(--pokemon-white) 100%
  );
  border-radius: 50%;
  position: relative;
  margin-right: 15px;
}

.nav-pokeball::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--pokemon-black);
  transform: translateY(-50%);
}

.nav-pokeball::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: var(--pokemon-white);
  border: 2px solid var(--pokemon-black);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.nav-item {
  font-size: 10px;
  color: var(--gameboy-light-green);
  cursor: pointer;
  padding: 5px 10px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.nav-item:hover,
.nav-item.active {
  color: var(--pokemon-yellow);
  border-color: var(--pokemon-yellow);
}

/* Game Sections */
.game-section {
  display: none;
  padding: 20px 0;
}

.game-section.active {
  display: block;
}

.pixel-container {
  padding: 10px;
  border: 2px solid var(--gameboy-light-green);
  background-color: rgba(155, 188, 15, 0.1);
  margin-bottom: 20px;
}

.section-header {
  text-align: center;
  margin-bottom: 20px;
}

.pixel-text {
  font-family: "VT323", monospace;
  color: var(--gameboy-light-green);
  line-height: 1.4;
}

h1.pixel-text {
  font-size: 36px;
}

h2.pixel-text {
  font-size: 24px;
}

h3.pixel-text {
  font-size: 18px;
}

p.pixel-text {
  font-size: 16px;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 18px;
  margin-bottom: 20px;
}

.pixel-divider {
  height: 4px;
  background: repeating-linear-gradient(
    to right,
    var(--gameboy-light-green),
    var(--gameboy-light-green) 5px,
    transparent 5px,
    transparent 10px
  );
  margin: 10px auto;
  width: 80%;
}

/* Home Section */
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-charizard {
  position: relative;
  margin-bottom: 20px;
}

.charizard-gif {
  max-width: 200px;
  height: auto;
  filter: drop-shadow(0 0 10px var(--fire-orange));
  animation: float-charizard 4s ease-in-out infinite;
}

@keyframes float-charizard {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.fire-effect {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 30px;
  background: radial-gradient(ellipse at center, var(--fire-orange) 0%, transparent 70%);
  filter: blur(5px);
  animation: fire-pulse 2s infinite;
}

@keyframes fire-pulse {
  0%,
  100% {
    opacity: 0.7;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.2);
  }
}

.glowing-text {
  text-shadow: 0 0 5px var(--charizard-orange), 0 0 10px var(--charizard-red);
  animation: text-glow 2s infinite;
}

@keyframes text-glow {
  0%,
  100% {
    text-shadow: 0 0 5px var(--charizard-orange), 0 0 10px var(--charizard-red);
  }
  50% {
    text-shadow: 0 0 10px var(--charizard-orange), 0 0 20px var(--charizard-red), 0 0 30px var(--charizard-yellow);
  }
}

.coin-text {
  color: var(--charizard-yellow);
}

.stats-box {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin: 20px 0;
  padding: 10px;
  background-color: rgba(155, 188, 15, 0.2);
  border: 2px solid var(--gameboy-light-green);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 10px;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 18px;
  color: var(--pokemon-yellow);
}

.stat-suffix {
  font-size: 18px;
  color: var(--pokemon-yellow);
  margin-left: 2px;
}

.hero-buttons {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.pixel-button {
  font-family: "Press Start 2P", cursive;
  font-size: 12px;
  padding: 10px 15px;
  background-color: transparent;
  border: 2px solid;
  cursor: pointer;
  position: relative;
  color: white;
  overflow: hidden;
  transition: all 0.3s ease;
}

.primary-button {
  color:white;
  border-color: var(--pokemon-red);
}

.primary-button:hover {
  background-color: var(--pokemon-red);
  color: white;
}

.info-button {
  color: var(--pokemon-blue);
  border-color: var(--pokemon-blue);
}

.info-button:hover {
  background-color: var(--pokemon-blue);
  color: var(--pokemon-white);
}

.button-text {
  position: relative;
  z-index: 1;
}

/* About Section */
.pokedex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
}

.pokedex-left,
.pokedex-right {
  flex: 1;
  min-width: 250px;
}

.pokedex-screen {
  background-color: var(--pokemon-black);
  border: 5px solid var(--pokemon-red);
  border-radius: 10px;
  padding: 10px;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}

.pokedex-image {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
}

.pokedex-lights {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.pokedex-light {
  border-radius: 50%;
}

.main-light {
  width: 30px;
  height: 30px;
  background-color: var(--pokemon-blue);
  animation: blink-light 2s infinite;
}

.small-light {
  width: 15px;
  height: 15px;
}

.red {
  background-color: var(--pokemon-red);
}

.yellow {
  background-color: var(--pokemon-yellow);
}

.green {
  background-color: var(--gameboy-light-green);
}

@keyframes blink-light {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pokedex-info {
  background-color: var(--pokemon-red);
  border-radius: 10px;
  padding: 15px;
}

.pokedex-entry {
  margin-bottom: 15px;
}

.pokedex-stats {
  margin-top: 10px;
}

.pokedex-stat {
  margin-bottom: 8px;
}

.stat-name {
  font-size: 12px;
  display: block;
  margin-bottom: 3px;
}

.stat-bar {
  height: 10px;
  background-color: var(--pokemon-black);
  border-radius: 5px;
  overflow: hidden;
}

.stat-fill {
  height: 100%;
  background-color: var(--pokemon-yellow);
  animation: fill-stat 2s forwards;
  width: 0;
}

@keyframes fill-stat {
  0% {
    width: 0;
  }
  100% {
    width: var(--width, 100%);
  }
}

.pokedex-description {
  background-color: var(--pokemon-white);
  border-radius: 5px;
  padding: 10px;
}

.pokedex-description .pixel-text {
  color: var(--pokemon-black);
}

.features-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.feature-card {
  background-color: rgba(155, 188, 15, 0.2);
  border: 2px solid var(--gameboy-light-green);
  padding: 15px;
  text-align: center;
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(155, 188, 15, 0.3);
}

.feature-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 10px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.speed-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239bbc0f'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm3.5-9c.8 0 1.5-.7 1.5-1.5S16.3 8 15.5 8 14 8.7 14 9.5s.7 1.5 1.5 1.5zM12 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm-3.5-3c.8 0 1.5-.7 1.5-1.5S9.3 8 8.5 8 7 8.7 7 9.5 7.7 11 8.5 11z'/%3E%3C/svg%3E");
}

.community-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239bbc0f'%3E%3Cpath d='M16 11c1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3 1.3 3 3 3zm-8 0c1.7 0 3-1.3 3-3S9.7 5 8 5 5 6.3 5 8s1.3 3 3 3zm0 2c-2.3 0-7 1.2-7 3.5V19h14v-2.5c0-2.3-4.7-3.5-7-3.5zm8 0c-.3 0-.6 0-.9.1 1.1.6 1.9 1.4 1.9 3.4V19h6v-2.5c0-2.3-4.7-3.5-7-3.5z'/%3E%3C/svg%3E");
}

.secure-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239bbc0f'%3E%3Cpath d='M12 1L3 5v6c0 5.5 3.8 10.7 9 12 5.2-1.3 9-6.5 9-12V5l-9-4zm0 10.8h7c-.5 4.2-3.3 7.9-7 9.2V12H5V6.3l7-3.1v8.6z'/%3E%3C/svg%3E");
}

/* Tokenomics Section */
.tokenomics-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.token-charizard {
  flex: 1;
  min-width: 200px;
  position: relative;
  text-align: center;
}

.token-image {
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.token-fire-effect {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 40px;
  background: radial-gradient(ellipse at center, var(--fire-orange) 0%, transparent 70%);
  filter: blur(8px);
  animation: fire-pulse 2s infinite;
}

.token-stats {
  flex: 2;
  min-width: 250px;
}

.token-stat-box {
  background-color: rgba(155, 188, 15, 0.2);
  border: 2px solid var(--gameboy-light-green);
  padding: 15px;
  margin-bottom: 20px;
}

.token-stat {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--gameboy-light-green);
}

.token-stat:last-child {
  border-bottom: none;
}

.token-stat-label {
  font-size: 14px;
}

.token-stat-value {
  font-size: 14px;
  color: var(--pokemon-yellow);
}

.token-description {
  margin-bottom: 20px;
}

.token-evolution {
  background-color: rgba(155, 188, 15, 0.2);
  border: 2px solid var(--gameboy-light-green);
  padding: 15px;
}

.evolution-stages {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
}

.evolution-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.evolution-icon {
  width: 40px;
  height: 40px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 5px;
}

.launch-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239bbc0f'%3E%3Cpath d='M12 2.5c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10-4.5-10-10-10zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm-1-13.5v6l5-3-5-3z'/%3E%3C/svg%3E");
}

.growth-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239bbc0f'%3E%3Cpath d='M3.5 18.5l6-6 4 4L22 7.5 20.5 6 13 13.5l-4-4-7 7z'/%3E%3C/svg%3E");
}

.final-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239bbc0f'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.45 4.73L5.82 21z'/%3E%3C/svg%3E");
}

.evolution-arrow {
  font-size: 24px;
  color: var(--gameboy-light-green);
}

.evolution-name {
  font-size: 12px;
}

/* Roadmap Section */
.roadmap-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.roadmap-path {
  flex: 3;
  min-width: 250px;
}

.roadmap-milestone {
  position: relative;
  padding-left: 30px;
  margin-bottom: 30px;
  opacity: 0.5;
  transition: all 0.5s ease;
}

.roadmap-milestone.active {
  opacity: 1;
}

.milestone-point {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background-color: var(--pokemon-red);
  border-radius: 50%;
  z-index: 1;
}

.roadmap-milestone::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 20px;
  width: 2px;
  height: calc(100% + 10px);
  background-color: var(--gameboy-light-green);
}

.roadmap-milestone:last-child::before {
  display: none;
}

.milestone-content {
  background-color: rgba(155, 188, 15, 0.2);
  border: 2px solid var(--gameboy-light-green);
  padding: 15px;
}

.milestone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px dashed var(--gameboy-light-green);
  padding-bottom: 5px;
}

.milestone-date {
  font-size: 12px;
  color: var(--pokemon-yellow);
}

.milestone-list {
  list-style: none;
}

.milestone-list li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 5px;
}

.milestone-list li::before {
  content: ">";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--pokemon-yellow);
}

.roadmap-character {
  flex: 1;
  min-width: 100px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.character-sprite {
  width: 64px;
  height: 64px;
  background-image: url("./images/logo.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  animation: walk 5s infinite;
}

@keyframes walk {
  0%,
  100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(50px);
  }
  50% {
    transform: translateY(100px);
  }
  75% {
    transform: translateY(150px);
  }
}

/* Buy Section */
.buy-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.buy-steps {
  flex: 2;
  min-width: 250px;
}

.buy-step {
  display: flex;
  margin-bottom: 20px;
  position: relative;
}

.step-number {
  width: 30px;
  height: 30px;
  background-color: var(--pokemon-red);
  color: var(--pokemon-white);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  flex-shrink: 0;
}

.step-content {
  background-color: rgba(155, 188, 15, 0.2);
  border: 2px solid var(--gameboy-light-green);
  padding: 15px;
  flex-grow: 1;
}

.wallet-icons,
.exchange-icons,
.dex-icons {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.wallet-icon,
.exchange-icon,
.dex-icon {
  width: 30px;
  height: 30px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.phantom {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239bbc0f'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm-1-13v3h2V7h-2zm0 4v6h2v-6h-2z'/%3E%3C/svg%3E");
}

.solflare {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239bbc0f'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm-1-13v3h2V7h-2zm0 4v6h2v-6h-2z'/%3E%3C/svg%3E");
}

.binance {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239bbc0f'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm-1-13v3h2V7h-2zm0 4v6h2v-6h-2z'/%3E%3C/svg%3E");
}

.coinbase {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239bbc0f'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm-1-13v3h2V7h-2zm0 4v6h2v-6h-2z'/%3E%3C/svg%3E");
}

.raydium {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239bbc0f'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm-1-13v3h2V7h-2zm0 4v6h2v-6h-2z'/%3E%3C/svg%3E");
}

.orca {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239bbc0f'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm-1-13v3h2V7h-2zm0 4v6h2v-6h-2z'/%3E%3C/svg%3E");
}

.token-address {
  margin-top: 15px;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 10px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.token-address code {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 5px 10px;
  border-radius: 5px;
  font-family: monospace;
}

.copy-button {
  background-color: var(--pokemon-blue);
  color: var(--pokemon-white);
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.copy-text,
.copied-text {
  transition: all 0.3s ease;
}

.copied-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--pokemon-red);
  transform: translateY(100%);
}

.copy-button.copied .copy-text {
  transform: translateY(-100%);
}

.copy-button.copied .copied-text {
  transform: translateY(0);
}

.battle-scene {
  flex: 1;
  min-width: 250px;
  background-color: rgba(155, 188, 15, 0.2);
  border: 2px solid var(--gameboy-light-green);
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
}

.battle-text {
  margin-bottom: 20px;
}

.battle-message {
  margin-bottom: 10px;
}

.battle-options {
  animation: blink 1s infinite;
}

.battle-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.battle-button {
  background-color: var(--gameboy-light-green);
  color: var(--gameboy-bg);
  border: 2px solid var(--gameboy-dark-green);
  padding: 8px;
  cursor: pointer;
  font-family: "Press Start 2P", cursive;
  font-size: 10px;
  transition: all 0.3s ease;
}

.battle-button:hover {
  background-color: var(--pokemon-yellow);
  border-color: var(--pokemon-gold);
}

/* Footer */
.game-footer {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 2px dashed var(--gameboy-light-green);
}

.footer-content {
  text-align: center;
}

.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.footer-pokeball {
  width: 20px;
  height: 20px;
  background: linear-gradient(
    to bottom,
    var(--pokemon-red) 0%,
    var(--pokemon-red) 50%,
    var(--pokemon-white) 50%,
    var(--pokemon-white) 100%
  );
  border-radius: 50%;
  position: relative;
  margin-right: 10px;
}

.footer-pokeball::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--pokemon-black);
  transform: translateY(-50%);
}

.footer-pokeball::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background-color: var(--pokemon-white);
  border: 2px solid var(--pokemon-black);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 15px 0;
}

.social-link {
  width: 30px;
  height: 30px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.3s ease;
}

.social-link:hover {
  transform: scale(1.2);
}

.twitter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239bbc0f'%3E%3Cpath d='M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z'/%3E%3C/svg%3E");
}

.telegram {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239bbc0f'%3E%3Cpath d='M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z'/%3E%3C/svg%3E");
}

.discord {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239bbc0f'%3E%3Cpath d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z'/%3E%3C/svg%3E");
}

.medium {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239bbc0f'%3E%3Cpath d='M4.37 7.46h.04c.13 0 .23-.1.23-.23V4.37c0-.12-.1-.22-.23-.23h-.04c-.13 0-.24.1-.24.23v2.86c0 .13.1.23.24.23zm4.37-2.23h.04c.13 0 .23-.1.23-.23V2.14c0-.12-.1-.22-.23-.23h-.04c-.13 0-.24.1-.24.23V5c0 .13.1.23.24.23zm-2.18 4.46h.04c.13 0 .23-.1.23-.23V7.6c0-.12-.1-.22-.23-.23h-.04c-.13 0-.24.1-.24.23v1.86c0 .13.1.23.24.23zm-4.37 2.23h.04c.13 0 .23-.1.23-.23V9.83c0-.12-.1-.22-.23-.23h-.04c-.13 0-.24.1-.24.23v1.86c0 .13.1.23.24.23zM22 5.6h-.04c-.13 0-.24.1-.24.23v9.4c0 .12.1.22.23.23h.04c.13 0 .24-.1.24-.23V5.83c0-.13-.1-.23-.23-.23zm-4.37 9.4h.04c.13 0 .23-.1.23-.23V2.14c0-.12-.1-.22-.23-.23h-.04c-.13 0-.24.1-.24.23v12.63c0 .13.1.23.24.23zm2.18-4.46h.04c.13 0 .23-.1.23-.23V7.6c0-.12-.1-.22-.23-.23h-.04c-.13 0-.24.1-.24.23v2.7c0 .14.1.24.24.24zm-4.36-2.24h.04c.13 0 .23-.1.23-.23V5.6c0-.12-.1-.22-.23-.23h-.04c-.13 0-.24.1-.24.23v2.47c0 .13.1.23.24.23zm-2.19 4.47h.04c.13 0 .23-.1.23-.23V9.83c0-.12-.1-.22-.23-.23h-.04c-.13 0-.24.1-.24.23v2.7c0 .14.1.24.24.24zm-4.37 2.23h.04c.13 0 .23-.1.23-.23V7.6c0-.12-.1-.22-.23-.23h-.04c-.13 0-.24.1-.24.23v7.16c0 .13.1.23.24.23z'/%3E%3C/svg%3E");
}

.copyright {
  font-size: 10px;
  margin-bottom: 5px;
}

.disclaimer {
  font-size: 8px;
  opacity: 0.7;
}

/* Game Controls */
.game-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.dpad {
  position: relative;
  width: 80px;
  height: 80px;
}

.dpad-up,
.dpad-right,
.dpad-down,
.dpad-left,
.dpad-center {
  position: absolute;
  background-color: var(--pokemon-black);
}

.dpad-up,
.dpad-down {
  width: 30px;
  height: 30px;
  left: 25px;
}

.dpad-left,
.dpad-right {
  width: 30px;
  height: 30px;
  top: 25px;
}

.dpad-up {
  top: 0;
}

.dpad-right {
  right: 0;
}

.dpad-down {
  bottom: 0;
}

.dpad-left {
  left: 0;
}

.dpad-center {
  width: 30px;
  height: 30px;
  top: 25px;
  left: 25px;
}

.action-buttons {
  display: flex;
  gap: 15px;
}

.button-a,
.button-b {
  width: 40px;
  height: 40px;
  background-color: var(--pokemon-red);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--pokemon-white);
  font-weight: bold;
}

.start-select {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.button-start,
.button-select {
  background-color: var(--pokemon-black);
  color: var(--pokemon-white);
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 10px;
  text-align: center;
}

/* Catch Animation */
.catch-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
}

.catch-animation.active {
  opacity: 1;
  visibility: visible;
}

.catch-pokeball {
  width: 100px;
  height: 100px;
  background: linear-gradient(
    to bottom,
    var(--pokemon-red) 0%,
    var(--pokemon-red) 50%,
    var(--pokemon-white) 50%,
    var(--pokemon-white) 100%
  );
  border-radius: 50%;
  position: relative;
  animation: catch-rotate 2s forwards;
  margin-bottom: 30px;
}

.catch-pokeball::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: var(--pokemon-black);
  transform: translateY(-50%);
}

.catch-pokeball::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: var(--pokemon-white);
  border: 5px solid var(--pokemon-black);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

@keyframes catch-rotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(180deg) scale(0.8);
  }
  50% {
    transform: rotate(360deg) scale(0.6);
  }
  75% {
    transform: rotate(540deg) scale(0.4);
  }
  100% {
    transform: rotate(720deg) scale(0.2);
  }
}

.catch-message {
  font-family: "Press Start 2P", cursive;
  color: var(--pokemon-white);
  text-align: center;
  opacity: 0;
  animation: fade-in 1s 2s forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Responsive Design */
@media screen and (max-width: 768px) {
  .gameboy-frame {
    width: 100%;
  }

  .nav-menu {
    gap: 10px;
  }

  .nav-item {
    font-size: 8px;
  }

  .hero-content {
    flex-direction: column;
  }

  .pokedex-container,
  .tokenomics-container,
  .buy-container {
    flex-direction: column;
  }

  .evolution-stages {
    flex-direction: column;
    gap: 15px;
  }

  .evolution-arrow {
    transform: rotate(90deg);
  }

  .game-controls {
    flex-direction: column;
    gap: 20px;
  }
}

@media screen and (max-width: 480px) {
  .gameboy-frame {
    padding: 10px;
  }

  .gameboy-screen {
    padding: 10px;
  }

  .nav-menu {
    flex-direction: column;
    gap: 5px;
  }

  .feature-cards {
    grid-template-columns: 1fr;
  }

  .stats-box {
    flex-direction: column;
    gap: 10px;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .battle-buttons {
    grid-template-columns: 1fr;
  }
}