/* Reset some default browser weirdness */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Let the page actually fill the screen */
html,
body {
  height: 100%;
  width: 100%;
}

/* Theme + spacing variables so we don't hardcode magic numbers everywhere */
:root {
  /* Colors */
  --bg-primary-color: rgb(17, 15, 15);       /* Main background */
  --bg-fill-color: white;                   /* Snake body color */
  --bg-food-color: rgb(232, 148, 22);       /* Food color */
  --text-primary-color: rgb(220, 214, 214); /* Text color on dark bg */

  /* Spacing scale (use these instead of random 7px/13px stuff) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px;

  /* Border + radius options so things look consistent */
  --border-primary-color: #807e7e;

  --border-size-xs: 1px;
  --border-size-sm: 2px;
  --border-size-md: 3px;
  --border-size-lg: 4px;
  --border-size-xl: 5px;

  --border-radius-xs: 4px;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 20px;
  --border-radius-2xl: 24px;
}

/* Overall page look */
html {
  background-color: var(--bg-primary-color);
  color: var(--text-primary-color);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
    sans-serif;
}

/* Main layout: the game lives inside this */
main,
section {
  height: 100%;
  width: 100%;
}

/* Section holds the score bar and the board, stacked vertically */
section {
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  height: 100vh;          /* Just fill the viewport nicely */
  gap: var(--space-lg);   /* Space between info bar and board */
}

/* Top bar: score, high score, time */
.infos {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

/* Each small box in the top info bar */
.info {
  padding: var(--space-sm) var(--space-md);
  border: var(--border-size-md) solid var(--border-primary-color);
  border-radius: var(--border-radius-sm);
}

/* The main game area where blocks / snake / food live */
.board {
  border: var(--border-size-md) solid var(--border-primary-color);
  border-radius: 3%;   /* Slight curve so it doesn't look too harsh */
  flex-grow: 1;        /* Take all leftover height after the info bar */
  display: grid;
  grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}

/* A single cell in the grid */
.block {
  width: 50px;
  height: 50px;
  /* Uncomment this if you want to see the grid clearly while debugging */
  /* border: 1px solid var(--border-primary-color); */
  border-radius: 50%;   /* Circles just look nicer here */
}

/* Snake segment */
.fill {
  background-color: var(--bg-fill-color);
}

/* Food piece */
.food {
  background-color: var(--bg-food-color);
  /* You can plug in a fun animation later if you feel fancy */
  animation: 2s;
}

/* Buttons like "Start" and "Restart" */
.btn {
  padding: var(--space-md) var(--space-lg);
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: 0.3s all ease-in-out;
  font-weight: 700;
  color: #1c1b1acd;
  background-color: #807e7e;
}

/* Slight zoom when you hover to show it's clickable */
.btn:hover {
  transform: scale(1.1);
}

/* Full-screen overlay for start/game-over states */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;          /* Cover the entire viewport */
  height: 100vh;
  backdrop-filter: blur(3px);  /* Blur the game behind the modal */
  z-index: 999;          /* Put it above everything */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Box inside the modal: used for both "start" and "game over" */
.modal .start-game,
.game-over {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: var(--space-xl);

  /* If you want a card look, uncomment and tweak this:
  background-color: rgba(0, 0, 0, 0.6);
  padding: var(--space-xl);
  border-radius: var(--border-radius-md);
  */
}

/* Game-over content is hidden by default; we show it when the player dies */
.game-over {
  display: none;
}