/* Google fonts import */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* Global box-sizing reset */
*, *::before, *::after {
  box-sizing: border-box;
}

/* CSS Variables */
:root {
  --primary-font: "Press Start 2P", monospace;
  --border-color: #000000; /* black */
  --shadow-color: #4b4949; /* darker grey */
  --left-highlight-color: #ffffff; /* white */
  --top-highlight-color: #d6d6d6; /* lighter grey */
  --background-color: #a5a5a5; /* light grey */
  --one-color: #00422E; /* dark green */
  --two-color: #131191; /* dark blue */
  --three-color: #6E0C59; /* dark pink */
  --four-color: #5C3100; /* brown */
}

/* Global styles */

/* Custom Bootstrap Navbar Styling */
.navbar-nav .nav-item {
  margin-left: 25px;
  margin-right: 25px;
}

.custom-navbar {
  font-family: var(--primary-font);
  background-color: var(--border-color);
  padding: 0px;
  z-index: 1000;
}

.custom-navbar .navbar-brand,
.custom-navbar .nav-link {
  color: var(--left-highlight-color);
  font-size: 14px;
  text-transform: uppercase;
  padding: 14px 20px;
  text-decoration: none;
}

.custom-navbar .nav-link:hover,
.custom-navbar .navbar-brand:hover {
  background-color: var(--top-highlight-color);
  color: var(--border-color);
}

.custom-navbar .nav-link.active {
  background-color: var(--shadow-color);
  color: var(--left-highlight-color);
}

/* Custom toggler icon for burger */
.custom-toggler {
  background-color: var(--left-highlight-color);
  border: none;
}

/* Bomb logo in nav bar */
.nav-logo {
  width: 35px;
}

/* Styling for main element(s) */
main {
  padding-top: 70px;
  display: flex;
  flex-direction: column;
  align-items: center; /* centers horizontally */
  justify-content: flex-start; /* top alignment */
  min-height: 100vh; /* helps with vertical space */
}

/* Styling for section element(s) */
section {
  padding-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center; /* centers horizontally */
  justify-content: flex-start; /* top alignment */
  min-height: 80vh; /* helps with vertical space */
}

/* Styling for div element(s) for font and alignment */
div {
  text-align: center;
  font-family: var(--primary-font);
}

/* Styling for heading element(s) */
h1 {
  padding-top: 20px;
  padding-bottom: 50px;
  text-transform: uppercase;
  text-align: center;
}

/* Styling for h3 subheadings - medium font size & bold weight to improve visual hierarchy */
h3 {
  font-size: medium;
  font-weight: bold;
}

/* Styling for game container */
.game-container {
  width: 600px;
}

/* Styling for game container */
.game-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  width: 500px;
  height: 500px;
  margin: 0 auto;
  gap: 0;
  background-color: var(--background-color); /* For clarity */
  /* Border around the full grid */
  border: 8px solid var(--border-color);
}

/* Styling for emojis & numbers in game grid */
.valid,
.bomb {
  background-color: var(--background-color); /* default grey */
  border: 2px solid var(--border-color);
  box-shadow:
    inset -2px -2px 0 0 var(--shadow-color),
    inset 2px 2px 0 0 var(--left-highlight-color),
    inset -1px 1px 0 0 var(--top-highlight-color);
  font-family: var(--primary-font);
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

.checked {
  background-color: var(--top-highlight-color); /* light grey */
  border: 2px solid var(--border-color);
  box-shadow: 
    inset 1px 1px 2px var(--shadow-color),
    inset -1px -1px 2px var(--shadow-color);
  font-family: var(--primary-font);
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  color: var(--border-color);
}

/* Each class applies a different color based on bomb count, which helps users quickly distinguish danger level */
.one {
  color: var(--one-color);
}

.two {
  color: var(--two-color);
}

.three {
  color: var(--three-color);
}

.four {
  color: var(--four-color);
}

/* Reset button styling */
#reset-button {
  font-family: var(--primary-font);
  font-size: 16px;
  margin-top: 15px;
  padding: 10px 20px;
  border: none;
  background-color: var(--shadow-color);
  color: var(--left-highlight-color);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--border-color);
}

/* Reset button hover */
#reset-button:hover {
  background-color: var(--top-highlight-color);
  color: var(--border-color);
}

/* How-to-play & About section padding to push below nav bar once link is clicked on all screen sizes */
#how-to-play,
#about {
  padding-top: 70px;
}

/* Joystick emoji */
.joystick {
  font-size: xxx-large;
  margin-top: -20px;
}

/* Scroll box(es) styling */
.scroll-box {
  background-color: var(--top-highlight-color);
  text-align: left;
  font-size: clamp(13px, 2vw, 15px);
  width: 90%;
  max-width: 600px;
  height: auto;
  max-height: 400px;
  overflow-y: auto;
  scrollbar-color: var(--left-highlight-color) var(--border-color);
  border: 5px solid var(--border-color);
  padding: 20px 30px;
  margin: 0 auto 60px auto;
  box-sizing: border-box;
}

/* Footer */
footer {
  font-family: var(--primary-font);
  font-size: 17px;
  color: var(--left-highlight-color);
  background-color: var(--shadow-color);
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 100vw;
  text-align: center;
  padding: 10px 20px;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* creator logo */
.logo-image {
  max-width: 280px;
  height: auto;
  display: block;
  margin: 10px auto;
}

/* Social media icons/links */
#social-networks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 10px 0;
  list-style-type: none;
}

/* Responsive sizing with clamp() & uses main highlight color from palette */
#social-networks i {
  font-size: clamp(20px, 6vw, 40px);
  color: var(--left-highlight-color);
}

/* Media Queries */

/* Reduce padding in scroll boxes to fit narrow screens */
@media screen and (max-width: 400px) {
  .scroll-box {
    padding: 15px 20px;
  }
}

/* Reduce horizontal spacing between nav links to prevent wrapping or overflow */
@media screen and (max-width: 576px) {
  .navbar-nav .nav-item {
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* Resize game grid and container to better fit smaller viewports */
@media screen and (max-width: 767px) {
  .game-container {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .game-grid {
    width: 300px;
    height: 300px;
    margin: 0 auto;
  }

  /* Reduce font sizes and padding for better mobile readability and touch usability */
  .valid,
  .bomb,
  .checked {
    font-size: 0.7rem; /* Prevent emoji/numbers from overflowing small grid cells */
  }

  /* Resize reset button for better fit and usability on smaller screens */
    #reset-button {
    font-size: 0.75rem;
    padding: 8px 16px;
  }
}