@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Pixelify+Sans:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');


html {
  overflow: auto;
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
}


html, body {
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }


html, body {
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }


body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #eee;
  margin: 0;
  background-image: url("Byrne.jpg");
  background-size: cover;

  overflow: auto;
  user-select: none;
  /* Use a crosshair cursor or any other visible cursor */


}

#gameArea {
  position: relative;
  height: 650px;
  width: 650px;
  border: 2px solid black;
  background: white;
  top: -10px;
  background-image: url("LovedayClass.png");
  background-size: cover;
 
}

/* Keep the game area fixed at 650x650 and prevent flexbox from shrinking it
   when the viewport is too small. Allow internal clipping if necessary. */
#gameArea {
  box-sizing: border-box;
  min-width: 650px;
  min-height: 650px;
  max-width: 650px;
  max-height: 650px;
  flex-shrink: 0;
  overflow: hidden;
}

/* Messages container inside the game area: center-top, stacked vertically */
#GameMessages {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  pointer-events: none; /* don't block interactions */
  width: 90%;
  max-width: 620px;
  z-index: 9999;
}

.gameMessage {
  pointer-events: auto; /* individual messages won't block the game but allow selection if needed */
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 6px 10px;
  border: 2px solid black;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

#player {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 57px;
  width: 57px;
}

#playerHUD {
  position: relative;
  height: 100px;
  width: 650px;
  border: 2px solid black;
  background: white;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 100px;
  justify-content: center;
  text-align: center;
  background-color: #666666;
  background-image: url("PlayerHUDBG.jpg");
  background-repeat: none;
  background-size: cover;
  font-size: 14px;
  box-sizing: border-box;
  /*padding-left: 4px; 
  padding-right: 4px; */
  min-width: 650px;
  min-height: 100px;
  max-width: 650px;
  max-height: 100px;
  flex-shrink: 0; 
  overflow: hidden;

}

#playerHUD > div {
  border-left: 4px solid black; /* Dark inner border between HUD elements */
  border-top: 2px solid black;
  border-bottom: 3px solid black;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*justify-content: center;*/
}

#mainMenu {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  
}

.difficultyButtons { display: flex; flex-direction: column; gap: 12px; }

#difficultyMenu {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  
}


#mapMenu {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  
}

#difficultyDesc {
  position: absolute;
  left: 65%;
  top: 50%;
  transform: translateY(-50%);
  min-width: 260px;
  min-height: 120px;
  border: 2px solid black;
  background: rgba(255,255,255,0.9);
  padding: 12px;
  display: none;
}


#mapDesc {
  position: absolute;
  left: 65%;
  top: 50%;
  transform: translateY(-50%);
  min-width: 260px;
  min-height: 120px;
  border: 2px solid black;
  background: rgba(255,255,255,0.9);
  padding: 12px;
  display: none;
}

.menuContent {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding: 24px 32px;
  background: rgba(255,255,255,0.9);
  border: 2px solid black;
  color: red;
}

.menuContent h1 { margin: 0 0 8px 0; color: red; }

.menuContent button {
  color: red;
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  padding: 8px 16px;
  cursor: pointer;
  border: 2px solid black;
  background: white;
}

.HudTitle {
  margin: 4px; /* smaller margin to preserve HUD space */
  align-items: left;  
  grid-row: 1;
  color: #FF000D;
  font-size: 15px;
}

.HudVar {
  margin: 4px; /* smaller margin to preserve HUD space */
  margin-top: 20px; /* smaller margin to preserve HUD space */
  align-items: left;
  grid-row: 2;
  color: #FF000D;
  font-size: 11px;
}

.HudVarLong {
  margin: 4px; /* smaller margin to preserve HUD space */
  margin-top: 20px; /* smaller margin to preserve HUD space */
  align-items: left;
  grid-row: 2;
  color: red;
  font-size: 11px;
}


.element::-webkit-scrollbar {
  display: none; /* Hides the scrollbar */
}

#screenFlash {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  display: none;
  background: transparent;
  transition: background 120ms ease;
}

#FPSCounter {
  position: absolute;
  top: -20px;
  left: 0;
  padding: 10px;
  color: grey;
  z-index: 999;
}