/* 1) Reset default margins/padding and ensure full viewport */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

/* 2) Tron-style grid background */
body {
  background-color: #000;
  background-image:
    linear-gradient(
      0deg,
      transparent 24%,
      rgba(0,255,255,0.2) 25%,
      rgba(0,255,255,0.2) 26%,
      transparent 27%,
      transparent 74%,
      rgba(0,255,255,0.2) 75%,
      rgba(0,255,255,0.2) 76%,
      transparent 77%,
      transparent
    ),
    linear-gradient(
      90deg,
      transparent 24%,
      rgba(0,255,255,0.2) 25%,
      rgba(0,255,255,0.2) 26%,
      transparent 27%,
      transparent 74%,
      rgba(0,255,255,0.2) 75%,
      rgba(0,255,255,0.2) 76%,
      transparent 77%,
      transparent
    );
  background-size: 50px 50px;
}

/* 3) Outer container: flexbox centers .game-area vertically & horizontally */
.outer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* 4) .game-area: fixed width (800px), vertical stacking */
.game-area {
  width: 800px;
  height: 800px;
  display: flex;
  flex-direction: column;
  align-items: center; /* centers children horizontally */
}

/* 5) Title box: Tron glow, same 800px width */
.title-box {
  width: 800px;
  margin-bottom: 20px;
  padding: 0;
  border: 4px solid rgba(0,255,255,0.5);
  box-shadow:
    0 0 10px rgba(0,255,255,0.5),
    0 0 20px rgba(0,255,255,0.5),
    0 0 30px rgba(0,255,255,0.5);
  text-align: center;
  animation: pulse 10s infinite alternate;
}

/* Title text styling */
.game-title {
  margin: 0;
  color: #0ff; /* Neon cyan */
  font-family: "Courier New", Courier, monospace;
  font-size: 2em;
  text-shadow:
    0 0 10px rgba(0,255,255,0.8),
    0 0 20px rgba(0,255,255,0.8);
}

/* 6) Scoreboard box: Tron glow, same 800px width */
.scoreboard-box {
  width: 800px;
  margin-bottom: 20px;
  padding: 0;
  border: 2px solid rgba(0,255,255,0.5);
  box-shadow:
    0 0 10px rgba(0,255,255,0.5),
    0 0 20px rgba(0,255,255,0.5),
    0 0 30px rgba(0,255,255,0.5);
  color: #0ff;
  font-family: "Courier New", Courier, monospace;
  text-shadow:
    0 0 10px rgba(0,255,255,0.8),
    0 0 20px rgba(0,255,255,0.8);
  text-align: center;
  animation: pulse 10s infinite alternate;
}

/* Scoreboard text styling */
.scoreboard-box p {
  margin: 0;
  font-size: 1em;
}

/* NEW: Split scoreboard inner content into two columns */
#scoreboard {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px;
}

.stats-column {
  width: 48%;
}

.stats-column p {
  margin: 0;
  font-size: 1em;
  text-align: left;
}

/* 7) #game-container: the p5 canvas goes here. We don't fix the width
      because p5 sets it to 800 when you call createCanvas(800, 600). */
#game-container canvas {
  display: block;
  border: 2px solid rgba(0,255,255,0.5);
  box-shadow:
    0 0 10px rgba(0,255,255,0.5),
    0 0 20px rgba(0,255,255,0.5),
    0 0 30px rgba(0,255,255,0.5);
}
/* Existing styles omitted for brevity... */

/* Shop container: Tron glow box */
#shop-container {
  width: 800px;
  background-color: rgba(0, 0, 0, 0.85);
  border: 2px solid rgba(0,255,255,0.5);
  box-shadow:
    0 0 10px rgba(0,255,255,0.5),
    0 0 20px rgba(0,255,255,0.5),
    0 0 30px rgba(0,255,255,0.5);
  
  text-align: center;
  color: #0ff;
  font-family: "Courier New", Courier, monospace;
  animation: pulse 10s infinite alternate;
}

/* Shop title with Tron glow text */
.shop-title {
  font-size: 2em;
  margin-bottom: 10px;
  text-shadow:
    0 0 10px rgba(0,255,255,0.8),
    0 0 20px rgba(0,255,255,0.8);
}

/* Display the player's coin count */
#coin-display {
  font-size: 1.2em;
  margin: 10px 0;
}

/* Container for all shop buttons (vertical stack) */
.shop-buttons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 20px 0;
  padding: 40px;
}
#shop-buttons {
  position: relative;
  min-height: 300px; /* Match your shop height */
}

/* style.css */
.shop-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Common Tron style for each upgrade button */
.shop-button {
  
  font-size: 1.2em;
  background-color: rgba(60,60,60,0.8);
  border: 2px solid rgba(0,255,255,0.5);
  border-radius: 8px;
  cursor: pointer;
  color: #0ff;
  box-shadow:
    0 0 10px rgba(0,255,255,0.5),
    0 0 20px rgba(0,255,255,0.5);
  transition: background-color 0.2s;
}

.shop-button:hover {
  background-color: rgba(80,80,80,0.9);
}

/* The "Continue" button - uses a green Tron glow */
.tron-button {
  padding: 10px 20px;
  font-size: 1.2em;
  background-color: rgba(0,200,0,0.8);
  border: 2px solid rgba(0,255,0,0.5);
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  box-shadow:
    0 0 10px rgba(0,255,0,0.5),
    0 0 20px rgba(0,255,0,0.5);
  transition: background-color 0.2s;
}

.tron-button:hover {
  background-color: rgba(0,230,0,0.9);
}

/* Highscore container styling */
#highscore-container {
  width: 800px;
  height: 600px;
  background-color: rgba(0, 0, 0, 0.15);
  border: 2px solid rgba(0,255,255,0.5);
  box-shadow:
    0 0 10px rgba(0,255,255,0.5),
    0 0 20px rgba(0,255,255,0.5),
    0 0 30px rgba(0,255,255,0.5);
  
  text-align: center;
  color: #0ff;
  font-family: "Courier New", Courier, monospace;
  display: none;
  animation: pulse 10s infinite alternate;
  z-index: 1000;
}

/* Highscore title with neon glow */
.highscore-title {
  font-size: 2em;
  margin-bottom: 10px;
  text-shadow:
    0 0 10px rgba(0,255,255,0.8),
    0 0 20px rgba(0,255,255,0.8);
}

/* Highscore list styling */
.highscore-list {
  text-align: center;
  max-height: 400px;
  overflow-y: auto;
  margin: 20px 0;
}

/* Tab container */
.highscore-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.highscore-tab {
  padding: 10px 20px;
  margin: 0 5px;
  background-color: rgba(60, 60, 60, 0.8);
  border: 2px solid rgba(0,255,255,0.5);
  border-radius: 8px;
  cursor: pointer;
  color: #0ff;
  transition: background-color 0.2s;
}

.highscore-tab:hover {
  background-color: rgba(80, 80, 80, 0.9);
}

.highscore-tab.active {
  background-color: rgba(0,200,0,0.8);
  border-color: rgba(0,255,0,0.8);
}


/* Each highscore entry */
.highscore-list p {
  margin: 5px 0;
  font-size: 1.2em;
  padding: 5px;
  ;
  border-bottom: 1px solid rgba(0,255,255,0.3);
}

/* Game Over container styling */
#gameover-container {
  width: 800px;
  
  border: 2px solid rgba(0,255,255,0.8);
  box-shadow: 0 0 10px rgba(0,255,255,0.8),
              0 0 20px rgba(0,255,255,0.8),
              0 0 30px rgba(0,255,255,0.8);
 
  text-align: center;
  color: #fff;
  font-family: "Courier New", Courier, monospace;
  display: none;
  animation: pulse 10s infinite alternate;
}

.gameover-title {
  font-size: 2em;
  margin-bottom: 10px;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.8),
               0 0 20px rgba(255, 0, 0, 0.8);
}

#gameover-container p {
  font-size: 1.2em;
  margin: 10px 0;
}

#gameover-container input[type="text"] {
  padding: 10px;
  font-size: 1.2em;
  width: 60%;
  margin: 10px 0;
  border: 2px solid rgba(0,255,255,0.5);
  border-radius: 8px;
  background-color: #000;
  color: #0ff;
  text-align: center;
}

.tron-button {
  padding: 10px 20px;
  font-size: 1.2em;
  background-color: rgba(0,200,0,0.8);
  border: 2px solid rgba(0,255,0,0.5);
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 0 10px rgba(0,255,0,0.5),
              0 0 20px rgba(0,255,0,0.5);
  transition: background-color 0.2s;
}

.tron-button:hover {
  background-color: rgba(0,230,0,0.9);
}

/* End Screen container styling */
#end-screen-container {
              /* Fixed so it covers the viewport */
  top: 0;
  
  
  width: 800px;
  background-color: rgba(0, 0, 0, 0.85);
  border: 2px solid rgba(0,255,255,0.5);
  box-shadow:
    0 0 10px rgba(0,255,255,0.5),
    0 0 20px rgba(0,255,255,0.5),
    0 0 30px rgba(0,255,255,0.5);
  
  text-align: center;
  color: #0ff;
  font-family: "Courier New", Courier, monospace;
  display: none;
  z-index: 9999;
  animation: pulse 10s infinite alternate;
}

.end-title {
  font-size: 2em;
  margin-bottom: 10px;
  text-shadow: 0 0 10px rgba(0,255,255,0.8),
               0 0 20px rgba(0,255,255,0.8);
}

#end-screen-container p {
  font-size: 1.2em;
  margin: 10px 0;
}

#end-screen-container button {
  padding: 10px 20px;
  font-size: 1.2em;
  background-color: rgba(0,200,0,0.8);
  border: 2px solid rgba(0,255,0,0.5);
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  box-shadow:
    0 0 10px rgba(0,255,0,0.5),
    0 0 20px rgba(0,255,0,0.5);
  transition: background-color 0.2s;
  margin-top: 20px;
  margin-bottom: 20px;
}

#end-screen-container button:hover {
  background-color: rgba(0,230,0,0.9);
}

/* Start Menu container styling */
/* Start Menu container styling */
#start-menu-container {
            /* Ensure it overlays the canvas */
  
  width: 800px;
  height: 600px;
  /* Two background layers: a translucent black gradient and the background image */
  background: 
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("assets/background.png") no-repeat center center;
  background-size: contain;
  border: 2px solid rgba(0,255,255,0.5);
  box-shadow:
    0 0 10px rgba(0,255,255,0.5),
    0 0 20px rgba(0,255,255,0.5),
    0 0 30px rgba(0,255,255,0.5);
  text-align: center;
  color: #0ff;
  font-family: "Courier New", Courier, monospace;
  display: none;
  z-index: 1000;
  /* Add a subtle pulsing animation on the box-shadow */
  animation: pulse 10s infinite alternate;
}

@keyframes pulse {
  from {
    box-shadow: 
      0 0 10px rgba(0,255,255,0.3),
      0 0 20px rgba(0,255,255,0.3),
      0 0 30px rgba(0,255,255,0.3);
  }
  to {
    box-shadow: 
      0 0 20px rgba(0,255,255,0.7),
      0 0 40px rgba(0,255,255,0.7),
      0 0 60px rgba(0,255,255,0.7);
  }
}
.start-instructions {
  font-size: 1.1em;
  margin-top: 20px;
  padding: 20px;
  color: #0ff;
  text-shadow: 0 0 5px rgba(0,255,255,0.8);
  line-height: 1.4;
}


.start-title {
  font-size: 2em;
  margin-top: 20%;
  margin-bottom: 40px;
  text-shadow: 0 0 10px rgba(0,255,255,0.8),
               0 0 20px rgba(0,255,255,0.8);
}

/* Tron-button style reused for Start and Highscore buttons */
.tron-button {
  padding: 10px 20px;
  font-size: 1.2em;
  background-color: rgba(0,200,0,0.8);
  border: 2px solid rgba(0,255,0,0.5);
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  box-shadow:
    0 0 10px rgba(0,255,0,0.5),
    0 0 20px rgba(0,255,0,0.5);
  transition: background-color 0.2s;
  margin: 10px;
}

.tron-button:hover {
  background-color: rgba(0,230,0,0.9);
}

/* Options container styling */
#options-container {
  
  width: 800px;
  height: 600px;
  background: 
    linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6));
    
  background-size: cover;
  border: 2px solid rgba(0,255,255,0.5);
  box-shadow:
    0 0 10px rgba(0,255,255,0.5),
    0 0 20px rgba(0,255,255,0.5),
    0 0 30px rgba(0,255,255,0.5);
  
  text-align: center;
  color: #0ff;
  font-family: "Courier New", Courier, monospace;
  display: none;
  z-index: 1000;
}

.options-title {
  font-size: 2em;
  margin-bottom: 20px;
  text-shadow:
    0 0 10px rgba(0,255,255,0.8),
    0 0 20px rgba(0,255,255,0.8);
}

.option-item {
  margin: 15px 0;
  font-size: 1.2em;
}

.option-item label {
  margin-right: 10px;
}

.option-item p {
  margin-bottom: 10px;
}

/* Tron-button styles are reused from your existing CSS */
.tron-button {
  padding: 10px 20px;
  font-size: 1.2em;
  background-color: rgba(0,200,0,0.8);
  border: 2px solid rgba(0,255,0,0.5);
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  box-shadow:
    0 0 10px rgba(0,255,0,0.5),
    0 0 20px rgba(0,255,0,0.5);
  transition: background-color 0.2s;
  margin: 10px;
}

.tron-button:hover {
  background-color: rgba(0,230,0,0.9);
}