html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden; /* This is the "kill switch" for scrolling */
      position: fixed;  /* Extra insurance for iOS Safari */
    }
    canvas {
      background: black;
      display: block;
      margin: 20px auto;
      border: 2px solid white;
    }
    body {
      color: white;
      text-align: center;
      font-family: monospace;
      background: #222;
      /* Add this line */
      padding-top: 10px;

      /* Add this to make sure the padding doesn't make the screen scrollable */
      box-sizing: border-box;
    }
    button {
      margin-top: 10px;
      padding: 8px 16px;
      font-size: 16px;
      border-radius: 8px;
      border: none;
      background: #444;
      color: white;
      cursor: pointer;
    }


   
   #status {
   position: absolute;
   top: 20%; /* Adjust to where you want it */
   left: 50%;
   transform: translateX(-50%);
   z-index: 200; /* Ensure this is higher than startOverlay's z-index */
   font-size: 2rem;
   font-weight: bold;
   color: yellow;
   text-align: center;
   pointer-events: none; /* Allows clicks to pass through if needed */
   }




#startOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Changed from 0.9 to 0.6 for more transparency */
background: rgba(0, 0, 0, 0);


display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}



#menuContainer {
width: 75%; /* Your suggested change - looks much better in landscape */
max-width: 275px;
/*background: rgba(51, 51, 51, 0.85);*/
background: rgba(143, 188, 143, 0.9);

/* TIGHTENED FOR MOBILE LANDSCAPE */
padding: 10px 20px; /* Reduced top/bottom padding from 20px to 10px */
margin: auto;       /* Ensures it stays centered */

border-radius: 15px;
border: 3px solid #8fbc8f;
color: black;
box-shadow: 0 0 20px rgba(0,0,0,0.5);

/* SAFETY MEASURE */
max-height: 90vh;   /* Keeps it from ever being taller than the screen */
overflow-y: auto;   /* Adds a scrollbar if the phone is tiny */
}

#menuContainer h1 {
font-size: 1.3rem; /* Reduced from default size */
margin: 5px 0;    /* Tight vertical spacing */
letter-spacing: 1px;
}

.menu-selection {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}

.selection-group p {
  margin-bottom: 5px;
  font-weight: bold;
  font-size:1.1rem;
}

.toggle-btn {
  background: #555;
  border: 1px solid #777;
  padding: 5px 10px;
  font-size: 14px;
}

.toggle-btn.active {
  background: #8b008b; /* Highlight selected option */
  border-color: #ff00ff;
}

.overlay-content {

  /*background: rgba(224, 224, 224, 0.9);*/
  padding: 10px;
  border-radius: 8px;
  display: inline-block; /* Wraps tightly around the list */
  text-align: center;     /* Keeps the list items tidy */
}

#startGameBtn {
background-color: #e74c3c; /* A solid, vibrant red */
color: white;              /* Keep the text white for high contrast */
border: none;              /* Removes the default browser gray border */

/* Re-applying our size shrinks from earlier */
padding: 8px 20px;
font-size: 1rem;
font-weight: bold;         /* Makes the "START" pop */
border-radius: 8px;
cursor: pointer;

/* Subtle shadow for a "clickable" feel */
box-shadow: 0 4px 0 #c0392b;
}

/* Optional: Make it look "pushed" when clicked */
#startGameBtn:active {
box-shadow: none;
transform: translateY(4px);
}
/* This is our custom 'pressed' state */
.is-pressed {
  background-color: #555 !important;
  border: 2px solid white;
  transform: translateY(2px); /* Makes it look physically pushed down */
}


#rules {
flex: 1.5; /* Gives the middle section slightly more room */
font-size: 11px;
color: white;
background: none; /* Remove previous background */
border: none;     /* Remove previous border */
text-align: center;
}

#rules h3 { font-size: 14px; margin-bottom: 5px; color: #8b008b; }
#rules ul { list-style: none; padding: 0; }



/* Red for P1, Blue for P2 */
#controlsP1 .game-btn { border-color: #ff4d4d; }
#controlsP2 .game-btn { border-color: #4d94ff; }

/* Prevent the whole page from scrolling */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

#gameContainer {
display: flex;
flex-direction: column;
height: 100vh; /* Lock to the screen height */
height: 100dvh; /* The "Dynamic" height that adjusts when bars appear/disappear */
width: 100vw;
margin: 0;
padding: 0;
overflow: hidden;
}

#gameCanvas {
border: none;       /* Removes any thin white lines */
outline: none;      /* Removes the 'focus' ring when you tap it */
border-bottom: 2px solid #444;
padding: 0;
margin: 0;
display: block;     /* Prevents 'inline' spacing at the bottom */
box-sizing: border-box;
}

#gameDashboard {
flex: 45; /* Takes exactly 45% of the height */
display: none; /* Hidden until game starts */
background: #222;

/* Flexbox Row */
display: flex;
justify-content: space-around;
align-items: stretch; /* Buttons stretch to fill the 45% height */
padding: 5px 15px;    /* Tight top padding to save space */
gap: 10px;
box-sizing: border-box;
}

.player-controls {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly; /* Distributes 3 buttons top-to-bottom */
  gap: 4px;
  flex: 1;
}
#centerUI {
flex: 0 0 20%; /* The hard-coded 20% gap in the middle */
display: flex;
align-items: center;
justify-content: center;
}

#controls-row {
display: flex;
justify-content: center;
gap: 10px;
width: 100%;

}
.player-cluster {
  display: flex;
  gap: 4px; /* Space between individual buttons */
  flex: 1;  /* Each group takes half the screen */
}
.game-btn {
  flex: 1;
  border-radius: 5px;
  font-weight: bold;
  font-size: 11px;
  border: 1px solid #444;
  color: white;
  height: 50px;
  cursor: pointer;
  touch-action: manipulation; /* Disables the double-tap-to-zoom delay */
}

/* Color Coding */
.btn-rest { background-color: #28a745; }   /* Green +2 */
.btn-push { background-color: #3498db; }   /* Light Blue -1 */
.btn-super { background-color: #c0c0c0; color: #333; } /* Silver -4 */

/* The Golden State (Override silver) */
.golden-charge {
  background: linear-gradient(45deg, #ffd700, #fff5b1) !important;
  color: #5c4b00 !important;
  border: 2px solid white !important;
  box-shadow: 0 0 10px gold;
}

/* Color Coding */
.p1-btn { border-color: #ff4d4d; }
.p2-btn { border-color: #4d94ff; }

/* The base style for the Super Button */
#btn-super-p1 {
transition: all 0.3s ease;
}



@keyframes golden-pulse {
  from { transform: scale(1); box-shadow: 0 0 10px rgba(255, 215, 0, 0.6); }
  to { transform: scale(1.08); box-shadow: 0 0 25px rgba(255, 215, 0, 1); }
}

@media (orientation: portrait) {
  #gameCanvas, #status {
  display: none !important;
  }

  /* Ensure the overlay stays centered and covers the background */
  #startOverlay {
  background: rgba(20, 20, 20, 1); /* Solid dark background to hide the 'empty' game space */
  display: flex;
  justify-content: center;
  align-items: center;
  }
}

@media (orientation: landscape) {
  .controls-container {
    height: 30%; /* Give the buttons a fixed percentage of the height */
    padding-bottom: env(safe-area-inset-bottom); /* Respect the iPhone home bar */
  }
  canvas {
    height: 60%; /* Shrink the canvas slightly to make room for buttons */
    width: auto;
  }
}