#fw-section-custom-html-7babb487-5fa3-4638-aef0-433730a42141 {

/* Styles for Game Link Sections */
.replit-game-link,
.like-catcher-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  padding: 10px;
  min-height: 100px;
  box-sizing: border-box;
}

.replit-game-image,
.like-catcher-image {
  max-width: 70%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
}

.replit-game-image:hover,
.like-catcher-image:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .replit-game-link,
  .like-catcher-link {
    padding: 8px;
    max-width: 90%;
  }
  .replit-game-image,
  .like-catcher-image {
    max-width: 80%;
  }
}
}


#fw-section-custom-html-c3e565a7-99c6-4e11-a473-a553a48c4f02 {

/* Styles for Chaos Game */
#chaos-game {
  text-align: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
  max-width: 600px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
}

#timer-display {
  position: absolute;
  width: 100%;
  color: #fff;
  font-size: 18px;
  display: none;
  display: flex;
  justify-content: center;
  left: 0;
  right: 0;
}

#final-score {
  position: absolute;
  max-width: 80%;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  color: #ffff00;
  font-size: 24px;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.8);
  padding: 5px;
  border: 2px solid #ff00ff;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 1s;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
}

#chaos-button {
  padding: 15px 30px;
  font-size: 18px;
  background-color: #ff0000;
  color: #fff;
  border: none;
  cursor: pointer;
  position: relative;
  margin-top: 10px;
}

/* Animation keyframes for obstacles */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Animation for shake effect */
@keyframes shake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-5px, 5px); }
  50% { transform: translate(5px, -5px); }
  75% { transform: translate(-5px, 5px); }
  100% { transform: translate(0, 0); }
}

/* Animation for flame flicker */
@keyframes flicker {
  0% { opacity: 0.5; }
  100% { opacity: 0.8; }
}

/* Button skin styles */
.fiery-skin {
  background: linear-gradient(45deg, #ff4500, #ff0000);
  box-shadow: 0 0 10px #ff4500;
}

.glitchy-skin {
  background: #000;
  color: #0f0;
  border: 2px solid #0f0;
  animation: glitch 0.3s infinite;
}

.neon-skin {
  background: #ff00ff;
  box-shadow: 0 0 15px #ff00ff, 0 0 30px #ff00ff;
}

.streak-aura {
  box-shadow: 0 0 10px #00ff00;
}

.streak-aura-high {
  box-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000;
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(2px, -2px); }
  60% { transform: translate(-2px, -2px); }
  80% { transform: translate(2px, 2px); }
  100% { transform: translate(0); }
}

/* Styles for Image Link Section */
.replit-game-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 10px;
  min-height: 100px;
  box-sizing: border-box;
}

.replit-game-image {
  max-width: 70%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
  transition: opacity 0.3s ease;
}

.replit-game-image:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .replit-game-link {
    padding: 8px;
    max-width: 90%;
  }
  .replit-game-image {
    max-width: 80%;
  }
}
}


#fw-section-custom-html-aa05eefb-175b-40bb-9d6f-b28af660eb75 {

/* Styles for Game Link Sections */
.replit-game-link,
.like-catcher-link,
.chaos-broken-link,
.broken-arcade-new-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1200px; /* Increased to fit two games */
  margin: 20px auto;
  padding: 10px;
  box-sizing: border-box;
  flex-wrap: wrap; /* Allow wrapping for smaller screens */
  gap: 20px; /* Space between game links */
}

/* Wrapper for each game link */
.game-link-wrapper {
  flex: 1;
  min-width: 300px; /* Ensure each game has enough space */
  max-width: 500px; /* Limit the width of each game */
  display: flex;
  justify-content: center;
  align-items: center;
}

.replit-game-image,
.like-catcher-image,
.chaos-broken-image,
.broken-arcade-new-image {
  max-width: 100%; /* Adjusted from 70% to fill the wrapper */
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
  transition: opacity 0.3s ease;
}

.replit-game-image:hover,
.like-catcher-image:hover,
.chaos-broken-image:hover,
.broken-arcade-new-image:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .replit-game-link,
  .like-catcher-link,
  .chaos-broken-link,
  .broken-arcade-new-link {
    flex-direction: column; /* Stack games vertically on mobile */
    padding: 8px;
    max-width: 90%;
    gap: 10px; /* Reduce gap on mobile */
  }

  .game-link-wrapper {
    min-width: 100%; /* Full width on mobile */
    max-width: 100%;
  }

  .replit-game-image,
  .like-catcher-image,
  .chaos-broken-image,
  .broken-arcade-new-image {
    max-width: 80%; /* Slightly smaller on mobile */
  }
}
}

#fw-section-custom-html-9c16d352-0db1-4992-ad76-ee842bef228d {

/* Wrapper to hold the banners and arcade section */
.chaos-arcade-wrapper {
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  justify-content: center;
  align-items: center; /* Center horizontally */
  gap: 20px; /* Space between banners and arcade section */
  padding: 20px;
  max-width: 600px; /* Match arcade section width for consistency */
  margin: 0 auto;
}

/* Style for the large affiliate banner (300x250) */
.affiliate-banner-large {
  flex: 0 0 auto; /* Use natural width */
  padding: 5px;
  background: linear-gradient(45deg, #1a1a1a, #2b2b2b); /* Dark gradient */
  border: 2px solid #666; /* Thin gray border */
  border-radius: 8px;
}

/* Style for the narrow affiliate banner (320x50) */
.affiliate-banner-narrow {
  flex: 0 0 auto; /* Use natural width */
  padding: 5px;
  background: linear-gradient(45deg, #1a1a1a, #2b2b2b); /* Dark gradient */
  border: 2px solid #666; /* Thin gray border */
  border-radius: 8px;
}

/* Ensure banner images respect their dimensions */
.affiliate-banner-large img {
  display: block; /* Prevent extra space below image */
  border: 1px solid #999;
  border-radius: 5px;
  width: 450px;
  height: 375px;
}

.affiliate-banner-narrow img {
  display: block; /* Prevent extra space below image */
  border: 1px solid #999;
  border-radius: 5px;
  width: 480px;
  height: 75px;
}

/* Existing styles for the arcade section */
.chaos-arcade-section {
  text-align: center;
  padding: 20px;
  max-width: 600px;
  margin: 0;
  margin-top: 100px; /* Space between narrow banner and arcade section */
  font-family:arial, sans-serif;
  background: linear-gradient(45deg, #1a1a1a, #2b2b2b); /* Dark gradient */
  border: 2px solid #666;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5), 0 0 25px rgba(255, 255, 255, 0.3); /* White neon glow */
}

/* New styles for the button */
.chaos-button {
  display: inline-block; /* Ensure proper sizing */
  padding: 15px 30px; /* Larger padding for prominence */
  font-size: 20px; /* Larger text */
  font-weight: 700; /* Bold text */
  text-transform: uppercase; /* Make text stand out */
  color: #fff; /* White text */
  background: linear-gradient(45deg, #1a1a1a, #2b2b2b); /* Match dark gradient */
  border: 2px solid #666; /* Match gray border */
  border-radius: 8px; /* Match rounded corners */
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.4); /* Stronger neon glow */
  text-decoration: none; /* Remove underline */
  transition: all 0.3s ease; /* Smooth hover effect */
}

.chaos-button:hover {
  background: linear-gradient(45deg, #2b2b2b, #3c3c3c); /* Lighter gradient on hover */
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.8), 0 0 35px rgba(255, 255, 255, 0.5); /* Brighter glow on hover */
  transform: scale(1.05); /* Slight scale-up for emphasis */
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .chaos-arcade-wrapper {
    padding: 10px;
  }

  .affiliate-banner-large img {
    width: 280px; /* Scale down large banner */
    height: auto; /* Maintain aspect ratio */
  }

  .affiliate-banner-narrow img {
    width: 280px; /* Scale down narrow banner */
    height: auto; /* Maintain aspect ratio */
  }

  .chaos-arcade-section {
    padding: 15px;
    margin-top: 60px; /* Adjusted for smaller screens */
  }

  .chaos-button {
    padding: 12px 25px; /* Slightly smaller padding */
    font-size: 18px; /* Slightly smaller text */
  }
}

/* Further adjustments for very small screens */
@media (max-width: 480px) {
  .affiliate-banner-large img {
    width: 240px; /* Further scale down */
    height: auto;
  }

  .affiliate-banner-narrow img {
    width: 240px; /* Further scale down */
    height: auto;
  }

  .chaos-arcade-section {
    padding: 10px;
    margin-top: 60px; /* Further adjusted */
  }

  .chaos-button {
    padding: 10px 20px; /* Smaller padding */
    font-size: 16px; /* Smaller text */
  }

  .chaos-heading {
    font-size: 24px;
  }

  .chaos-body {
    font-size: 14px;
  }
}
}
#fw-section-custom-html-3f90f60e-1c6e-4caf-89fd-78007faa4522 {

/* Styles for Game Link Sections */
.replit-game-link,
.like-catcher-link,
.chaos-broken-link,
.broken-arcade-new-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  padding: 10px;
  box-sizing: border-box;
  flex-wrap: wrap;
  gap: 20px;
}

/* Wrapper for each game link */
.game-link-wrapper {
  flex: 1;
  min-width: 300px;
  max-width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.replit-game-image,
.like-catcher-image,
.chaos-broken-image,
.broken-arcade-new-image {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
  transition: opacity 0.3s ease;
}

.replit-game-image:hover,
.like-catcher-image:hover,
.chaos-broken-image:hover,
.broken-arcade-new-image:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .replit-game-link,
  .like-catcher-link,
  .chaos-broken-link,
  .broken-arcade-new-link {
    flex-direction: column;
    padding: 8px;
    max-width: 90%;
    gap: 10px;
  }

  .game-link-wrapper {
    min-width: 100%;
    max-width: 100%;
  }

  .replit-game-image,
  .like-catcher-image,
  .chaos-broken-image,
  .broken-arcade-new-image {
    max-width: 80%;
  }
}
}


#fw-section-custom-html-0a6f4176-01ea-4311-9d91-3b01b2290e51 {

/* Version Chooser Page Styles */
.version-chooser-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
}

.version-chooser-container h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  color: #ffffff; /* Changed to white for better contrast on dark backgrounds */
}

.version-chooser-container p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  color: #cccccc; /* Light gray for readability */
}

.version-options {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.version-option {
  flex: 1;
  min-width: 300px;
  max-width: 400px;
  padding: 20px;
  background: linear-gradient(45deg, #1a1a1a, #2b2b2b); /* Dark gradient to match site aesthetic */
  border: 2px solid #666; /* Thin gray border */
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5), 0 0 25px rgba(255, 255, 255, 0.3); /* White neon glow */
  transition: transform 0.2s ease;
}

.version-option:hover {
  transform: translateY(-5px);
}

.version-option h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  color: #ffffff; /* White for readability on dark background */
  font-weight: bold;
}

.version-option p {
  font-size: 1rem;
  margin-bottom: 20px;
  color: #cccccc; /* Light gray for readability */
}

/* Updated Button Styles for 3D Effect */
.version-button {
  display: inline-block;
  padding: 12px 24px;
  font-size: 1.1rem;
  text-decoration: none;
  border-radius: 5px;
  border: 2px solid transparent;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: all 0.2s ease;
}

.go-3d-button {
  background: linear-gradient(to bottom, #ff6666, #ff4d4d 50%, #e60000);
  color: white;
  border-color: #cc0000;
}

.go-3d-button:hover {
  background: linear-gradient(to bottom, #ff8080, #ff6666 50%, #ff4d4d);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), 0 3px 6px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.go-3d-button:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
  transform: translateY(2px);
}

.traditional-button {
  background: linear-gradient(to bottom, #66b3ff, #4d79ff 50%, #0055ff);
  color: white;
  border-color: #0033cc;
}

.traditional-button:hover {
  background: linear-gradient(to bottom, #80c0ff, #66b3ff 50%, #4d79ff);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), 0 3px 6px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.traditional-button:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
  transform: translateY(2px);
}

/* Responsive Design */
@media (max-width: 768px) {
  .version-chooser-container {
    margin: 20px auto;
    padding: 10px;
  }

  .version-chooser-container h1 {
    font-size: 2rem;
  }

  .version-chooser-container p {
    font-size: 1rem;
  }

  .version-options {
    flex-direction: column;
    gap: 20px;
  }

  .version-option {
    min-width: 100%;
    max-width: 100%;
  }

  .version-button {
    padding: 10px 20px;
    font-size: 1rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .go-3d-button:hover,
  .traditional-button:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
  }

  .go-3d-button:active,
  .traditional-button:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0.5px 1px rgba(0, 0, 0, 0.1);
    transform: translateY(1px);
  }
}
}
#fw-section-custom-html-95eb94fe-0ada-46b6-b7bc-ea00a2efce3d {

.gamefly-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  padding: 15px;
  background: linear-gradient(45deg, #1a1a1a, #2b2b2b);
  border: 2px solid #666;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(255, 105, 180, 0.5), 0 0 10px rgba(0, 255, 255, 0.5);
  max-width: 100%;
  overflow: hidden;
}

.gamefly-banner img {
  border: 1px solid #999;
  border-radius: 5px;
  width: 100%;
  max-width: 728px;
  height: auto;
}

@media (max-width: 768px) {
  .gamefly-banner {
    padding: 10px;
    margin: 10px auto;
  }

  .gamefly-banner img {
    max-width: 100%;
    height: auto;
  }
}
}
#fw-section-custom-html-a2dbd517-92d3-4baf-a904-79ff049c4e56 {

/* Styles for Game Link Sections */
.replit-game-link,
.like-catcher-link,
.chaos-broken-link,
.broken-arcade-new-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 600px; /* Adjusted for single game */
  margin: 20px auto;
  padding: 10px;
  box-sizing: border-box;
  flex-wrap: wrap;
  gap: 20px;
}

/* Wrapper for each game link */
.game-link-wrapper {
  flex: 1;
  min-width: 300px;
  max-width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.replit-game-image,
.like-catcher-image,
.chaos-broken-image,
.broken-arcade-new-image {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
  transition: opacity 0.3s ease;
}

.replit-game-image:hover,
.like-catcher-image:hover,
.chaos-broken-image:hover,
.broken-arcade-new-image:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .replit-game-link,
  .like-catcher-link,
  .chaos-broken-link,
  .broken-arcade-new-link {
    flex-direction: column;
    padding: 8px;
    max-width: 90%;
    gap: 10px;
  }

  .game-link-wrapper {
    min-width: 100%;
    max-width: 100%;
  }

  .replit-game-image,
  .like-catcher-image,
  .chaos-broken-image,
  .broken-arcade-new-image {
    max-width: 80%;
  }
}
}

#fw-section-custom-html-24116c0b-69ee-4987-aa17-7c93e089bbcf {

/* Styles for Game Link Sections */
.replit-game-link,
.like-catcher-link,
.chaos-broken-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  padding: 10px;
  min-height: 100px;
  box-sizing: border-box;
}

.replit-game-image,
.like-catcher-image,
.chaos-broken-image {
  max-width: 70%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
  transition: opacity 0.3s ease; /* Moved inline transition to CSS */
}

.replit-game-image:hover,
.like-catcher-image:hover,
.chaos-broken-image:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .replit-game-link,
  .like-catcher-link,
  .chaos-broken-link {
    padding: 8px;
    max-width: 90%;
  }
  .replit-game-image,
  .like-catcher-image,
  .chaos-broken-image {
    max-width: 80%;
  }
}
}

#fw-section-custom-html-376161c5-dd4a-4170-b044-d5ea91039db0 {

/* Wrapper for side-by-side games */
.game-container {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  justify-content: center; /* Center games horizontally */
  align-items: center; /* Center games vertically */
  width: 100%;
  max-width: 800px; /* Limit total width for larger screens */
  margin: 0 auto; /* Center container */
  padding: 10px;
  box-sizing: border-box;
  gap: 20px; /* Space between games */
}

/* Individual game link styling */
.replit-game-link {
  display: flex !important; /* Force flexbox */
  justify-content: center !important; /* Center image horizontally */
  align-items: center !important; /* Center image vertically */
  width: 45%; /* Each game takes ~45% of container */
  max-width: 300px; /* Limit individual game width */
  min-height: 100px; /* Space for vertical centering */
  padding: 10px;
  box-sizing: border-box;
}

/* Game image styling */
.replit-game-image {
  max-width: 100% !important; /* Full width of parent */
  height: auto;
  border-radius: 10px;
  display: block !important;
  margin: 0 auto !important; /* Extra centering */
  transition: opacity 0.3s ease;
}

/* Hover effect */
.replit-game-image:hover {
  opacity: 0.8; /* Subtle fade on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .game-container {
    flex-direction: column; /* Stack games vertically on mobile */
    gap: 15px; /* Smaller gap on mobile */
  }
  .replit-game-link {
    width: 80%; /* Wider on mobile */
    max-width: 90%; /* Allow more space */
  }
  .replit-game-image {
    max-width: 100%; /* Full width on mobile */
  }
}

/* Fallback for stubborn layouts */
.replit-game-link > a {
  display: inline-block;
  width: 100%;
  text-align: center;
}
}




#fw-section-hero-1743962728 {

.fw-section-hero img {
  border: 2px solid #666; /* Thin gray border */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5), 0 0 25px rgba(255, 255, 255, 0.3); /* White neon glow */
  border-radius: 8px; /* Slightly rounded corners */
  padding: 10px; /* Space between the image and the border */
  box-sizing: border-box; /* Ensure padding doesn’t affect dimensions */
}
}