* {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
  box-sizing: border-box;
}
body {
  display: flex;
  flex-direction: column;
  background-color: #4f4c49;
}
/* ---------------------- */
/* Header design */
/* -------------------------- */
header {
  text-align: center;
  font-size: 38px;
  background-color: #d2c9ba;
  padding: 7px;
  border: 5px solid #3b3b3b;
  /* border-radius: 20px; */
}
/* ----------------------------- */
/* section design */
/* ------------------------------ */
section {
  display: flex;
  justify-content: space-around;
}
/* mini-header design */
.mini-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mini-header img {
  height: 33px;
  width: 33px;
}
/* mini header icons and scores */
.text-score,
.text-gem {
  margin-top: 11px;
}
.score img {
  height: 37px;
  width: 37px;
}

.score,
.gemshow {
  display: flex;
}
/* ---------------------------------------------------- */
/* Left Score board and right Shop */
/* ------------------------------------------------------ */
.scoreBoard,
.settings {
  margin-top: 60px;
  background-color: #241104;
  border: 5px solid #3b3b3b;
  border-radius: 12px;

  display: flex;
  flex-direction: column;
  justify-content: start;
  width: 16vw;
  /* 
  padding: 7px; */
}
/* Editing the header image */
.a {
  width: 23vw;
  object-fit: cover;
  position: absolute;
  transform: translate(-17%, -53%);
}

.title1 {
  padding: 7px;
  margin-top: 24px;
}

.sbscreen {
  /* position: relative;
  transform: translate(10%, -22vh); */
  background-color: #d2c9ba;
  border-radius: 7px;
  display: none;

  margin: 3px;
}
#scores {
  /* margin-left: 20px; */
  padding-left: 60px;
}
#scores li {
  padding: 2px;
}
.resetbtn {
  background-color: red;
  text-align: center;

  border-radius: 7px;
  border: solid 3px rgb(117, 2, 2);

  width: 60%;
  padding: 3px 0px;
  margin: 0px 0px 10px 3vw;
}
.resetbtn:hover {
  cursor: pointer;
  background-color: darksalmon;
}
.upbtn {
  background-color: #341b14da;
  text-align: center;
  padding: 7px;
  border-radius: 7px;
  border: 4px solid #261c16;
  z-index: 1;
  display: none;
}

.upbtn:hover {
  cursor: pointer;
  background-color: #2b2522;
}
.downbtn {
  background-color: #341b14da;
  text-align: center;
  padding: 7px;
  border-radius: 7px;
  border: 4px solid #261c16;

  display: block;
  z-index: 1;
}

.downbtn:hover {
  cursor: pointer;
  background-color: #2b2522;
}

/* Shop etc. */

/* ---------------------------------------------- */
/* Main Content */
.content {
  margin-top: 40px;
}
.game-screen {
  position: relative;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(24, 1fr);

  background-image: url("assets/background2.png");
  background-size: cover;
  background-position: center center;
  border: 5px solid #3b3b3b;

  height: 500px;
  width: 500px;

  padding: 10px;
}
.cover img {
  position: absolute;
  height: 100%;
  z-index: 2;
  left: 0px;
  top: 0px;
}
.cover-text {
  color: white;
  position: absolute;
  z-index: 3;
  bottom: 21px;
  left: 29px;
}
.blink {
  display: none;
}
.gameover-text {
  color: red;
  z-index: 2;
  position: absolute;
  bottom: 222px;
  left: 123px;
  font-size: 27px;
  display: none;
}

/* design of food, snake skin etc. */
.apple {
  background-image: url("./assets/apple.png");
  background-size: contain;
  background-position: center center;
  transform: scale(2);
}
.cherry {
  background-image: url("./assets/cherry.png");
  background-size: contain;
  background-position: center center;
  transform: scale(2);
}
.banana {
  background-image: url("./assets/banana.png");
  background-size: contain;
  background-position: center center;
  transform: scale(2);
}
.gemblock {
  background-image: url("./assets/emerald.png");
  background-size: contain;
  background-position: center center;
  transform: scale(2);
}

/* SHARED: Rich, blocky, heavily textured, dark green snake base */
.snake-head,
.snake-body,
.snake-tail {
  position: relative;
  z-index: 1;
  border-radius: 2px;
  background:
    /* Snake-scale diamond pattern, more pronounced */ repeating-linear-gradient(
      135deg,
      #28361d 0 3px,
      #56753b 3px 8px
    ),
    repeating-linear-gradient(-45deg, #8da16c 0 3px, #2c4b26 3px 7px),
    /* Texture overlay: erosion/grime */
      repeating-linear-gradient(
        160deg,
        #22351322 2px,
        transparent 4px,
        transparent 8px
      ),
    linear-gradient(180deg, #273b24 64%, #171b12 100%);
}

/* SNAKE HEAD: darker and "marked", sets it apart */
.snake-head {
  background:
    /* Bolder diamonds and spot pattern */ repeating-linear-gradient(
      135deg,
      #1c2614 0 3px,
      #324427 3px 8px
    ),
    repeating-linear-gradient(-45deg, #64934d 0 3px, #23381a 3px 7px),
    /* Head center mark -- faint lighter "arrow"/triangle for focus */
      linear-gradient(160deg, transparent 80%, #b6e29233 100%),
    /* Head shadow for attention */
      linear-gradient(180deg, #243a1a 67%, #161b0f 100%);
}

/* SNAKE BODY: more natural green, heavy diamond scales, grime overlay */
.snake-body {
  background: repeating-linear-gradient(135deg, #28361d 0 3px, #56753b 3px 8px),
    repeating-linear-gradient(-45deg, #8da16c 0 3px, #2c4b26 3px 7px),
    repeating-linear-gradient(
      160deg,
      #22351322 2px,
      transparent 4px,
      transparent 8px
    ),
    linear-gradient(180deg, #2e5430 60%, #212c1b 100%);
}

/* SNAKE TAIL: tapers to rich dark, same texture for seamlessness */
.snake-tail {
  border-radius: 2px 3px 8px 1px;
  background: repeating-linear-gradient(135deg, #28361d 0 3px, #56753b 3px 8px),
    repeating-linear-gradient(-45deg, #8da16c 0 3px, #2c4b26 3px 7px),
    linear-gradient(180deg, #334d29 75%, #141b10 100%);
}

/* No grid/highlight effect */
.game-screen,
.cell,
.snake-head,
.snake-body,
.snake-tail {
  image-rendering: crisp-edges;
  outline: none;
}