@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap');

    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    html, body {
      height: 100%;
      overflow: hidden; /* 🚫 no scroll */
    }

    body {
      background: #1B3C53;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between; 
      font-family: 'New Tegomin', serif;
    }

    /* ---------------- NAV ---------------- */
    nav {
      height: 60px;
      background-color: #C5B0CD;
      display: flex;
      align-items: center;
      padding: 0 15px;
      font-size: 25px;
      font-weight: bold;
      justify-content: space-between;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100;
      white-space: nowrap;
    }

    .heading {
      color: #1B3C53;
      font-weight: bold;
    }

    nav button {
      background: none;
      color: #1B3C53;
      font-weight: bold;
      margin: 10px;
      font-size: 17px;
      border: none;
      cursor: pointer;
      outline: none;
      font-family: 'New Tegomin', serif;
    }

    /* ---------------- SCORE ---------------- */
    .scoreBar {
      margin-top: 65px; /* below nav */
      font-size: 22px;
      font-weight: bold;
      color: #C5B0CD;
      text-align: center;
      z-index: 99;
      white-space: nowrap;
    }

    /* ---------------- GAME ---------------- */
    .gameContainer {
      flex: 1; /* take remaining space */
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
    }

    #board {
      background: #C5B0CD;
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
      width: 75vmin;
      height: 75vmin;
      border-radius: 17px;
      display: grid;
      grid-template-rows: repeat(16, 1fr);
      grid-template-columns: repeat(16, 1fr);
      position: relative;
    }

    .head {
      background: #17313E;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .snake {
      background-color: #1B3C53;
      border-radius: 15px;
      width: 95%;
      height: 95%;
      justify-self: center;
      align-self: center;
    }

    .food {
      background: #932F67;
      border-radius: 50%;
      width: 80%;
      height: 80%;
      justify-self: center;
      align-self: center;
    }

    .eye {
      width: 4px;
      height: 4px;
      background: #C5B0CD;
      border-radius: 50%;
      position: absolute;
      top: 6px;
    }
    .eye.left { left: 4px; }
    .eye.right { right: 4px; }

    /* ---------------- GAME OVER ---------------- */
  #gameOverBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1B3C53; /* swapped: dark blue background */
  padding: 24px 40px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  font-family: 'New Tegomin', serif;
  z-index: 10;
  color: #fff; /* white text for contrast */
}

#gameOverBox.hidden {
  display: none;
}

#gameOverBox h2 {
  font-size: 1.8rem;
  margin-bottom: 16px;
  color: #fff; /* white title */
}

#restartBtn {
  background: #C5B0CD; /* swapped: light lavender */
  color: #1B3C53;      /* dark text */
  border: none;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: bold;
  white-space: nowrap;
}

#restartBtn:hover {
  background: #b29bbc; /* slightly darker lavender on hover */
}


    /* ---------------- CONTROLS ---------------- */
    .controls {
      display: none; /* hidden on desktop */
    }

    @media (max-width: 900px) {
       body {
    justify-content: flex-start; /* no push to bottom */
  }
  nav{
      padding: 0 10px;
      font-size: 20px;
  }
  .scoreBar{
     font-size: 18px;
  }
    .controls {
       margin-top: 60px;  /* fine-tune position */
  } 
  .scoreBar {
      margin-top: 60px;
  }
      #board {
        width: 92vw;
        height: 92vw;
      }
      .gameContainer{
        margin-top: 15px;
        margin-bottom: 20px;
      }
      .controls {
  display: grid;
  grid-template-columns: 60px 60px 60px; /* 3 columns */
  grid-template-rows: 60px 60px 60px;    /* 3 rows */
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.controls button {
  background: #C5B0CD;
  border: none;
  color: #1B3C53;
  font-size: 20px;
  font-weight: bold;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  outline:none;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

/* placement */
.controls .up    { grid-column: 2; grid-row: 1; } /* center top */
.controls .left  { grid-column: 1; grid-row: 2; } /* left middle */
.controls .right { grid-column: 3; grid-row: 2; } /* right middle */
.controls .down  { grid-column: 2; grid-row: 3; } /* center bottom */

    }