@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  font-family: "Press Start 2P", cursive;
  color: white;
  user-select: none;
  -webkit-touch-callout: none;
  /* Base font size scales with the smallest screen dimension */
  font-size: 3vmin; 
}

button {
  outline: none;
  cursor: pointer;
  border: none;
  /* Responsive 3D shadow */
  box-shadow: 0.5vmin 0.8vmin 0px 0px rgba(0, 0, 0, 0.75);
}

#counter {
  position: absolute;
  top: 4vmin;
  right: 4vmin;
  font-size: 6vmin; 
}

/* --- HOME SCREEN --- */
#home {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #baf455;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

#home h1 {
  font-size: 10vmin; /* Massive scaling title */
  text-align: center;
  line-height: 1.5;
  text-shadow: 0.6vmin 0.6vmin 0px rgba(0, 0, 0, 0.3);
  margin-bottom: 8vmin;
}

#home button {
  background-color: white;
  color: black;
  padding: 3vmin 8vmin;
  font-family: inherit;
  font-size: 5vmin;
}

/* --- GAME OVER SCREEN --- */
#end {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.4); /* Dim the background when you die */
  z-index: 50;
}

#end button {
  background-color: red;
  padding: 3vmin 8vmin;
  font-family: inherit;
  font-size: 5vmin;
}

/* --- CONTROLS (D-PAD) --- */
#controlls {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 10;
  pointer-events: none; /* Lets you tap the screen behind the control wrapper */
}

#controlls div {
  pointer-events: auto; 
  display: grid;
  /* Back to your original comfortable sizes for Desktop */
  grid-template-columns: 60px 60px 60px;
  grid-template-rows: 60px 60px;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  margin-bottom: 30px;
}

/* BUT... if the screen is smaller than 600px (like a phone), shrink them! */
@media (max-width: 600px) {
  #controlls div {
    grid-template-columns: 20vw 20vw 20vw;
    grid-template-rows: 20vw 20vw;
  }
}

#controlls button {
  width: 100%;
  height: 100%;
  background-color: white;
  border: 1px solid lightgray;
  display: flex;
  align-items: center;
  justify-content: center;
}

#controlls button svg {
  width: 50%; /* Makes the arrows perfectly scale inside the buttons */
  height: 50%;
}

#controlls button:first-of-type {
  grid-column: 1/-1;
}

/* --- SETTINGS UI --- */
#settings-btn {
  position: absolute;
  top: 4vmin;
  left: 4vmin; /* Placed top left so it doesn't hit the score */
  font-size: 6vmin;
  cursor: pointer;
  z-index: 90;
}

#settings-modal {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background-color: #454a59;
  padding: 6vmin;
  border: 1vmin solid white;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 5vmin;
  box-shadow: 2vmin 2vmin 0px rgba(0,0,0,0.5);
}

#settings-modal h2 { margin: 0; text-align: center; }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 5vmin; }
.control-types { display: flex; gap: 2vmin; }
.type-btn { padding: 2vmin 3vmin; font-size: 3vmin; background-color: white; color: black; }
.type-btn.active { background-color: #baf455; }
#close-settings { background-color: white; color: black; padding: 2vmin; margin-top: 2vmin;}

/* --- RESPONSIVE TOUCH CONTROLS --- */
#controlls {
  position: absolute;
  bottom: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 10;
  pointer-events: none; /* Let clicks pass through the invisible box */
}

#controlls button {
  position: absolute;
  width: 15vmin; height: 15vmin;
  pointer-events: auto; /* Make the buttons clickable */
  display: flex; align-items: center; justify-content: center;
}
#controlls button svg { width: 50%; height: 50%; }

/* Type 1: Right = Forward/Back, Left = Left/Right */
.type-1 #forward { bottom: 25vmin; right: 5vmin; }
.type-1 #backward { bottom: 5vmin; right: 5vmin; }
.type-1 #left { bottom: 5vmin; left: 5vmin; }
.type-1 #right { bottom: 5vmin; left: 25vmin; }

/* Type 2: Left = Forward/Back, Right = Left/Right */
.type-2 #forward { bottom: 25vmin; left: 5vmin; }
.type-2 #backward { bottom: 5vmin; left: 5vmin; }
.type-2 #left { bottom: 5vmin; right: 25vmin; }
.type-2 #right { bottom: 5vmin; right: 5vmin; }

/* Type 3: All buttons on Right (Cross Shape) */
.type-3 #forward { bottom: 25vmin; right: 25vmin; }
.type-3 #backward { bottom: 5vmin; right: 25vmin; }
.type-3 #left { bottom: 15vmin; right: 45vmin; }
.type-3 #right { bottom: 15vmin; right: 5vmin; }

/* Type 4: All buttons on Left (Cross Shape) */
.type-4 #forward { bottom: 25vmin; left: 25vmin; }
.type-4 #backward { bottom: 5vmin; left: 25vmin; }
.type-4 #left { bottom: 15vmin; left: 5vmin; }
.type-4 #right { bottom: 15vmin; left: 45vmin; }