/* ===============================
   TechProIQ Network Builder Styles
   =============================== */

#tnb-game-container {
  text-align: center;
  position: relative;
  max-width: 900px;
  margin: auto;
  padding-bottom: 40px;
  color: #ffffff;
}

/* ===============================
      Score + Prompt Display
   =============================== */

#tnb-score {
  font-size: 22px;
  font-weight: bold;
  color: #00ff99;
  margin: 10px 0 5px 0;
  text-shadow: 0 0 4px #000;
}

#tnb-prompt {
  font-size: 18px;
  color: #ffe680;
  font-weight: 600;
  margin-bottom: 15px;
  text-shadow: 0px 0px 6px #000;
  min-height: 24px;
}

/* ===============================
      Splash Screen (Start)
   =============================== */

#tnb-splash {
  background: linear-gradient(to bottom right, #b5e9ff, #dff7ff);
  padding: 40px;
  border-radius: 20px;
  margin-top: 30px;
  color: #003b63;
}

#tnb-splash h1 {
  font-size: 2.5em;
  color: #007acc;
  font-weight: 700;
}

#tnb-splash p {
  font-size: 1.1em;
  color: #004b6e;
}

#tnb-splash footer {
  margin-top: 25px;
  font-size: 0.9em;
  color: #004b6e;
}

/* ===============================
            Buttons
   =============================== */

#tnb-start-btn,
#tnb-next-btn {
  background: #007bff;
  color: white;
  font-size: 1.2em;
  border: none;
  padding: 12px 35px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.2s ease;
}

#tnb-start-btn:hover,
#tnb-next-btn:hover {
  background: #0056b3;
  transform: scale(1.03);
}
#tnb-reset-btn {
  background: #ff4444;
  color: #fff;
  font-size: 1.1em;
  padding: 10px 28px;
  border-radius: 10px;
  margin-left: 10px;
  border: none;
  cursor: pointer;
}

#tnb-reset-btn:hover {
  background: #cc0000;
}


/* ===============================
            Canvas
   =============================== */

canvas#tnb-canvas {
  border: 2px solid #1ea0ff;
  border-radius: 12px;
  display: none;
  margin-top: 30px;
  background: #871414; /* dark theme background */
  width: 900px;
  height: 500px;
}

/* Prevents distorted scaling */
canvas#tnb-canvas:focus {
  outline: none;
}

/* ===============================
     Level Complete / Game Complete
   =============================== */

#tnb-level-complete,
#tnb-game-complete {
  display: none;
  background: #dff7ff;
  color: #000000;
  padding: 35px;
  border-radius: 20px;
  margin-top: 25px;
  font-size: 1.3em;
  font-weight: 600;
  border: 2px solid #aee9ff;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

#tnb-level-complete h2,
#tnb-game-complete h2 {
  margin-bottom: 15px;
  color: #004b6e;
}

/* ===============================
            Explanation Box
   =============================== */

#tnb-explanation {
  display: none;
  background: #ffffff;
  color: #000;
  padding: 20px;
  border-radius: 14px;
  font-size: 16px;
  max-width: 750px;
  margin: 25px auto 0 auto;
  border: 2px solid #bde8ff;
}

/* ===============================
          Responsive Fixes
   =============================== */

@media (max-width: 768px) {

  canvas#tnb-canvas {
    width: 100% !important;
    height: auto !important;
  }

  #tnb-splash h1 {
    font-size: 1.8em;
  }

  #tnb-start-btn,
  #tnb-next-btn {
    font-size: 1em;
    padding: 10px 25px;
  }
}