/* -----------------------------
   Game wrapper and canvas
------------------------------ */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: black;
  overflow: hidden; /* prevent scrollbars */
}

#game-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  background: black; /* covers entire screen */
}

#game-wrapper {
  display: inline-block;
  border: 4px solid #0f0; /* green border around game area */
  box-sizing: border-box;
  background: black;
}

canvas {
  display: block;
  background: black; /* ensures canvas is fully black */
}

/* -----------------------------
   Overlays (start + win/lose)
------------------------------ */
#start-overlay,
#overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  font-family: monospace;
}

#start-overlay {
  background: rgba(0, 0, 0, 0.9);
}

#overlay {
  background: rgba(0, 0, 0, 0.8);
}

.hidden {
  display: none !important;
}

/* -----------------------------
   Popup boxes
------------------------------ */
.popup {
  background: black;
  border: 2px solid #0f0;
  padding: 32px 48px;
  text-align: left;
  color: #0f0;
  max-width: 600px;
  box-sizing: border-box;
}

#overlay .popup {
  text-align: center;
}

/* Headings */
#start-overlay .popup h1 {
  font-size: 2em;
  margin: 16px 0 8px;
}

#overlay .popup h2 {
  font-size: 1.8em;
  margin: 0 0 16px;
}

/* Images */
#start-overlay .popup img {
  margin: 5% 50%;
  transform: translate(-50%, 0);
}

/* Buttons */
.popup button {
  margin-top: 16px;
  padding: 8px 16px;
  background: black;
  color: #0f0;
  border: 1px solid #0f0;
  cursor: pointer;
  font-family: monospace;
  font-size: 1em;
}

.popup button:hover {
  background: #0f0;
  color: black;
}

/* -----------------------------
   Font
------------------------------ */
@font-face {
  font-family: "RasterForge";
  src: url("/public/Pongsweeper/RasterForgeRegular-JpBgm.ttf") format("truetype");
}
body.font-terminus {
  font-family: "RasterForge", monospace;
}