.token-details {
  font-family: 'Press Start 2P', cursive !important;
}
.section-title {
  font-size: 2.5rem;
  color: #fff !important;
  text-shadow: 2px 2px #000;
  font-family: 'Press Start 2P', cursive !important;
}
/* Pixelated Comic Style for Token Cards */
.token-card {
  border: 6px solid #000 !important;
  border-radius: 0; /* keep squared */
  background: #FFECB3; /* light comic paper color */
  box-shadow: 6px 6px 0 #000;
  image-rendering: pixelated; /* pixel render */
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
  text-align: center;
  position: relative;
  color: #000;
  font-family: "Press Start 2P", cursive; /* pixel comic font */
  letter-spacing: 1px;
}
.token-card.show {
  opacity: 1;
  transform: scale(1);
}
/* Pixelated train connectors */
#tokenCards .col-md-4:not(:last-child) .token-card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  transform: translateY(-50%);
  width: 40px;
  height: 12px;
  background: repeating-linear-gradient(
    90deg,
    #000 0 4px,
    #fff 4px 8px
  ); /* pixel blocks */
}
/* Locomotive (red comic engine) */
#tokenCards .col-md-4:first-child .token-card {
  background: repeating-linear-gradient(
    45deg,
    #FF4444,
    #FF4444 8px,
    #B02020 8px,
    #B02020 16px
  );
  color: #fff;
}
/* Middle wagon (blue stripes) */
#tokenCards .col-md-4:nth-child(2) .token-card {
  background: repeating-linear-gradient(
    45deg,
    #3A82F7,
    #3A82F7 8px,
    #1E4DA1 8px,
    #1E4DA1 16px
  );
  color: #fff;
}
/* Caboose (green stripes) */
#tokenCards .col-md-4:last-child .token-card {
  background: repeating-linear-gradient(
    45deg,
    #4CAF50,
    #4CAF50 8px,
    #2E7D32 8px,
    #2E7D32 16px
  );
  color: #fff;
}
/* Pixel wheels */
.token-card::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 15px;
  width: 26px;
  height: 26px;
  background: #000;
  image-rendering: pixelated;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 100%,
    0% 100%
  ); /* blocky wheel */
  box-shadow: 60px 0 #000;
}
#tokenCards .col-md-4:nth-child(2) .token-card::before {
  box-shadow: 80px 0 #000;
}
#tokenCards .col-md-4:nth-child(3) .token-card::before {
  box-shadow: 100px 0 #000;
}
/* Titles in comic yellow */
.token-card h5 {
  color: #FFD700;
  font-size: 1rem;
  text-shadow: 2px 2px #000;
}
.token-card p {
  font-size: 0.9rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px #000;
}
/* Hover pixel pop */
.token-card:hover {
  transform: scale(1.05);
  box-shadow: 8px 8px 0 #000;
}
/* Token intro card */
.token-intro {
  background: #fff;
  border: 3px solid #000;
  box-shadow: 6px 6px 0 #fff;
  border-radius: 12px;
  width: 300px;
  cursor: pointer;
  transition: transform 0.2s;
}
.token-intro:hover {
  transform: scale(1.05);
}
.click-text {
  font-weight: bold;
  color: #52AE47;
}
/* Loading animation */
.loading-screen {
  height: 150px;
  position: relative;
  overflow: hidden;
}
.loading-logo {
  width: 150px;
  position: absolute;
  left: -100px;
  top: 5%;
  animation: bulletMove 2s linear forwards;
}
@keyframes bulletMove {
  0% { left: -100px; }
  100% { left: 100%; }
}
.token-card h5 {
  color: #FFD700; /* yellow highlight */
  font-size: 1.3rem;
}
.token-card p {
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff;
}
/* Responsive */
@media (max-width: 768px) {
  .section-title { font-size: 2rem; }
  .token-intro { width: 100%; }
}
.tokenomics {
  background:url('/images/tt2.png');
  background-position: center;
  background-size: cover;
}
.section-title {
  font-size: 2.5rem;
  color: #52AE47;
  text-shadow: 2px 2px #000;
}

@media (max-width:768px){
  .section-title{
    font-size: 2rem !important;
  }
}

/* Tokenomics Card Comic Pixel Style */
.tokenomics-card {
  position: relative;
  z-index: 1;
  background: repeating-linear-gradient(
    45deg,
    #FFFFFF,
    #FFFFFF 10px,
    #F5F5F5 10px,
    #F5F5F5 20px
  ); /* subtle comic panel stripes */
  border: 6px solid #000;
  box-shadow: 8px 8px 0 #000, 0 0 20px rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  padding: 2rem;
  font-family: "Press Start 2P", cursive; /* retro comic font */
  image-rendering: pixelated;
}
/* Remove old cloud */
.tokenomics-card::before {
  display: none;
}
/* List items inside */
.tokenomics-card li {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.2rem;
  color: #000;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #FFD54F; /* comic bubble yellow */
  padding: 0.7rem 1rem;
  border: 2px solid #000;
  border-radius: 8px;
  box-shadow: 4px 4px 0 #000;
  transition: transform 0.2s ease, background 0.3s ease;
}
.tokenomics-card li:hover {
  transform: scale(1.05);
  background: #FFD54F;
}
/* Icons styled bold */
.tokenomics-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(2px 2px 0 #000);
}
/* Right Image */
.tokenomics-img {
  max-width: 100%;
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (max-width: 768px) {
  .section-title { font-size: 2rem; }
  .tokenomics-card { padding: 1.5rem; }
  .tokenomics-img { max-width: 100%; margin-top: 20px; }
}
/* :video_game: Token Details Section */
.token-details {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 2rem;
  margin: 4rem auto;
  max-width: 1100px;
  flex-wrap: wrap;
  font-family: "Press Start 2P", cursive;
}
/* Base Style for All Boxes */
.token-box {
  position: relative;
  flex: 1 1 280px;
  background: #fff;
  border: 6px solid #000;
  box-shadow: 6px 6px 0 #000;
  border-radius: 10px;
  padding: 2rem 1.5rem;
  text-align: center;
  image-rendering: pixelated;
  position: relative;
}


.token-img {
  position: absolute;
  top: -30px; /* adjust how much it overlaps */
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
}

.token-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}



/* Different Pixelated Colors */
.box1 {
  background: repeating-linear-gradient(
    45deg,
    #FFEBEE,
    #FFEBEE 12px,
    #FFCDD2 12px,
    #FFCDD2 24px
  );
}
.box2 {
  background: repeating-linear-gradient(
    45deg,
    #E3F2FD,
    #E3F2FD 12px,
    #BBDEFB 12px,
    #BBDEFB 24px
  );
}
.box3 {
  background: repeating-linear-gradient(
    45deg,
    #E8F5E9,
    #E8F5E9 12px,
    #C8E6C9 12px,
    #C8E6C9 24px
  );
}
/* Headings */
.token-box h3 {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #000;
  text-shadow: 2px 2px #fff;
}
/* Values */
.token-box p {
  font-size: 0.9rem;
  color: #111;
  background: #F5F5F5;
  padding: 0.8rem;
  border: 3px solid #000;
  border-radius: 6px;
  box-shadow: 3px 3px 0 #000;
}