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

html,
body {
  height: 100%;
  width: 100%;
}

:root {
  --bg-primary-color: #0f0f0f;
  --bg-fill-color: #fdfdfc;
  --bg-food-color: #ff3b3b;

  --text-primary-color: #f4efef;

  --space--xs: 4px;
  --space--sm: 8px;
  --space--md: 16px;
  --space--lg: 24px;
  --space--xl: 32px;
  --space--2xl: 40px;
  --space--3xl: 48px;

  --border-primary-color: #1b1b1b;

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

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,
section {
  height: 100%;
  width: 100%;
}

section {
  padding: var(--space--2xl);
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--space--lg);
}

section .infos {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: var(--space--md);
  flex-wrap: wrap;
}

.info {
  padding: var(--space--sm) var(--space--md);
  border: 1px solid var(--border-primary-color);
  border-radius: var(--border-radius-sm);
}

/* Board */
.board {
  border: 1px solid var(--border-primary-color);
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
  overflow: hidden;
}

/* Grid blocks */
.block {
  border: 1px solid var(--border-primary-color);
  border-radius: 4px;
}

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

/* Snake head with eyes */
.block.head {
  position: relative;
  background-color: #00ffa2 !important;
  border-radius: 10px;
  transform: scale(1.12);
}

/* Eyes base */
.block.head::before,
.block.head::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: #111;
  border-radius: 50%;
}

/* Direction-wise eye positions */

/* UP */
.head.up::before { top: 6px; left: 12px; }
.head.up::after  { top: 6px; right: 12px; }

/* DOWN */
.head.down::before { bottom: 6px; left: 12px; }
.head.down::after  { bottom: 6px; right: 12px; }

/* LEFT */
.head.left::before { top: 12px; left: 6px; }
.head.left::after  { bottom: 12px; left: 6px; }

/* RIGHT */
.head.right::before { top: 12px; right: 6px; }
.head.right::after  { bottom: 12px; right: 6px; }

/* Food */
.food {
  background-color: var(--bg-food-color);
}

/* Modal */
.modal {
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  position: fixed;
  background-color: #35353587;
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal .start-game,
.modal .game-over {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--lg);
  padding: var(--space--lg);
  background-color: #151515;
  border-radius: var(--border-radius-md);
}

.modal .game-over {
  display: none;
}

.btn {
  padding: var(--space--sm) var(--space--md);
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn:hover {
  transform: scale(1.1);
}

/* food eat animation */
@keyframes food-pop {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

.food-pop {
  animation: food-pop 0.25s forwards;
}


/* 📱 On-screen D-pad controls - bottom right */
.onscreen-controls {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: grid;
  grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(3, 48px);
  gap: 6px;
  z-index: 1000;
  touch-action: none;
}

.ctrl-btn {
  border-radius: 8px;
  border: 1px solid var(--border-primary-color);
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--text-primary-color);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ctrl-btn--empty {
  visibility: hidden;
}

/* 📱 Mobile: board bigger + controls thoda bade */
@media (max-width: 768px) {
  section {
    padding: var(--space--md);
    gap: var(--space--md);
  }

  .board {
    height: 70vh; /* mobile pe board bada */
  }

  .onscreen-controls {
    grid-template-columns: repeat(3, 56px);
    grid-template-rows: repeat(3, 56px);
    bottom: 16px;
    right: 16px;
  }

  .ctrl-btn {
    font-size: 1.3rem;
  }
}