/* Game Section */
#gameArea {
  position: relative;
  width: 100%;
  height: 75vh;
  background: linear-gradient(180deg, #000, #111);
  overflow: hidden;
  border: 2px solid #0ff;
  border-radius: 15px;
  margin-top: 10px;
  box-shadow: 0 0 25px #00ffff33;
}

.navbar {
  background: #000;
  box-shadow: 0 0 15px #00ffff44;
}

.details-header {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 80px;
}

#controls {
  display: none;
  justify-content: center;
  gap: 30px;
  margin-top: 15px;
}

.control-btn {
  width: 115px;
  height: 65px;
  border-radius: 5%;
  color: #000;
  font-size: 24px;
  font-weight: bold;
  border: 2px solid #00cccc;
  box-shadow: 0 0 10px #00ffff88;
  padding: 0px 12px;
}

/* Snake */
.snake{
  width:20px;
  height:20px;
  background:linear-gradient(45deg,#0ff,#00f,#9f25c5);
  position:absolute;
  border-radius:4px;
}

/* Food */
.food {
  position: absolute;
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  user-select: none;
}


/* Start Screen */
#startScreen{
  position:absolute;
  inset:0;
  background:rgba(0,0,0);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  z-index:101;
  text-align:center;
}



#scoreboard {
  text-align: center;
  padding: 10px;
  background: #000;
  border-radius: 8px;
  font-size: 20px;
  margin: 0px auto;
  width: 90%;
  max-width: 600px;
  box-shadow: 0 0 15px #00ffff55;
}


@media (max-width: 768px) {
  #gameArea { height: 5vh; }
  #player { width: 60px; height: 30px; }
  #scoreboard { font-size: 15px; }
  button { padding: 6px 16px; font-size: 14px; }
  #controls { display: flex; }
}

/* 🔵 Landscape Mode (Horizontal Mobile) */
@media screen and (max-height: 500px) and (orientation: landscape) {
   #controls { display: flex; }
}

/* Responsive Design */
@media (max-width: 768px) {
  #gameOver, #startScreen {
      width: 100%;
      padding: 0;
  }

  #gameArea {
    height: 54vh;
  }

  #player {
    width: 60px;
    height: 30px;
  }

  #scoreboard {
    font-size: 15px;
  }

  button {
    padding: 6px 12px;
    font-size: 14px;
  }

  #controls {
    display: flex;
  }
  #startScreen h2,#gameOver h2 {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  #controls {
    display: flex;
  }
}


/* Start Button full screen and sound of and on */
.btn-fs {
  font-family: 'Orbitron', sans-serif;
  background: linear-gradient(90deg, #00ffff33, #00ffff88);
  border: 2px solid #0ff;
  color: #0ff;
  padding: 10px 25px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 0 12px #00ffff44, inset 0 0 5px #00ffff22;
}
.btn-fs i {
  margin-right: 6px;
}
.btn-fs:hover {
  background: #0ff;
  color: #000;
  box-shadow: 0 0 20px #00ffffaa, 0 0 40px #00ffff55;
  transform: scale(1.05);
}
.btn-fs:active {
  transform: scale(0.97);
  box-shadow: 0 0 10px #00ffff55 inset;
}
/* End Button full screen and sound of and on */

#leftBtn
{  
      background-image: linear-gradient(45deg, rgb(12 208 255), rgb(0 0 255), rgb(159 37 197));
}
#rightBtn
{  
      background-image: linear-gradient(45deg, rgb(159 37 197), rgb(0, 0, 255), rgb(10, 140, 219));
}
#topBtn
{  
      background-image: linear-gradient(45deg, rgb(12 208 255), rgb(0 0 255), rgb(159 37 197));
}
#bottomBtn
{  
      background-image: linear-gradient(45deg, rgb(159 37 197), rgb(0, 0, 255), rgb(10, 140, 219));
}
#player
{
  background-image: linear-gradient(180deg, rgb(12 208 255), rgb(0 0 255), rgb(159 37 197));
}

#gameOverScreen{
  position:absolute;
  inset:0;
  background:rgba(0,0,0);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  z-index:101;
  text-align:center;
}


.snake.tail {
  transform: scale(0.6);   /* 👈 tail সরু */
  opacity: 0.8;
}
.snake.tail-1 {
  transform: scale(0.75);
  opacity: 0.85;
}

.snake.tail-2 {
  transform: scale(0.6);
  opacity: 0.7;
}

.snake.tail-3 {
  transform: scale(0.45);
  opacity: 0.55;
}


/* Snake Head */
.snake.head {
  position: absolute;
}

/* Eyes base */
.snake.head .eye {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px #00ffff;
}

/* 👉 RIGHT (default) */
.snake.head.right .eye.left {
  top: 2px;
  left: 12px;
}
.snake.head.right .eye.right {
  top: 12px;
  left: 12px;
}

/* 👉 LEFT */
.snake.head.left .eye.left {
  top: 2px;
  left: 3px;
}
.snake.head.left .eye.right {
  top: 12px;
  left: 3px;
}

/* 👉 UP */
.snake.head.up .eye.left {
  top: 3px;
  left: 2px;
}
.snake.head.up .eye.right {
  top: 3px;
  left: 12px;
}

/* 👉 DOWN */
.snake.head.down .eye.left {
  top: 12px;
  left: 2px;
}
.snake.head.down .eye.right {
  top: 12px;
  left: 12px;
}
.snake.head .eye {
  width: 6px;
  height: 6px;
}


/* 👁️ Eye blink animation */
@keyframes blink {
  0%, 90%, 100% {
    transform: scaleY(1);
  }
  92%, 96% {
    transform: scaleY(0.1);
  }
}

/* Apply blink to eyes */
.snake.head .eye {
  animation: blink 4s infinite;
  transform-origin: center;
}
.snake.head .eye.left {
  animation-delay: 0s;
}

.snake.head .eye.right {
  animation-delay: 0.2s;
}


/* 🔥 Head glow pulse */
/* 🔥 Bigger & stronger head glow pulse */
@keyframes headPulse {
  0% {
    box-shadow:
      0 0 8px  #00ffff66,
      0 0 15px #00ffff55;
  }

  50% {
    box-shadow:
      0 0 25px #00ffffcc,
      0 0 45px #00ffffaa,
      0 0 70px #00ffff77,
      0 0 90px #00ffff55;
  }

  100% {
    box-shadow:
      0 0 8px  #00ffff66,
      0 0 15px #00ffff55;
  }
}

/* Pulse class */
.snake.head.pulse {
  animation: headPulse 0.45s ease-out;
}


.snake.head {
  transition: box-shadow 0.15s ease;
}


/* 🔥 Glow animations by color */

@keyframes pulse-blue {
  50% {
    box-shadow:
      0 0 25px #00ffffcc,
      0 0 50px #00ffff99,
      0 0 80px #00ffff66;
  }
}

@keyframes pulse-green {
  50% {
    box-shadow:
      0 0 25px #00ff66cc,
      0 0 50px #00ff6699,
      0 0 80px #00ff6666;
  }
}

@keyframes pulse-yellow {
  50% {
    box-shadow:
      0 0 25px #ffff00cc,
      0 0 50px #ffff0099,
      0 0 80px #ffff0066;
  }
}

@keyframes pulse-red {
  50% {
    box-shadow:
      0 0 30px #ff0033cc,
      0 0 60px #ff003399,
      0 0 90px #ff003366;
  }
}

/* Glow classes */
.snake.head.glow-blue.pulse   { animation: pulse-blue 0.45s ease-out; }
.snake.head.glow-green.pulse  { animation: pulse-green 0.45s ease-out; }
.snake.head.glow-yellow.pulse { animation: pulse-yellow 0.45s ease-out; }
.snake.head.glow-red.pulse    { animation: pulse-red 0.45s ease-out; }


/* ⏸ Pause / Resume Button */
.pause-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 20;

  width: 42px;
  height: 42px;
 

  
  cursor: pointer;
}





/* 👅 Forked tongue base */
.snake.head .tongue.fork {
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: 0;
  pointer-events: none;
}

/* two splits */
.snake.head .tongue.fork .t {
  position: absolute;
  width: 3px;
  height: 10px;
  background: #ff3366;
  border-radius: 2px;
  top: 0;
}

.snake.head .tongue.fork .t.left {
  left: 3px;
  transform: rotate(-12deg);
}

.snake.head .tongue.fork .t.right {
  right: 3px;
  transform: rotate(12deg);
}

/* direction positioning */
.snake.head.up .tongue {
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
}

.snake.head.down .tongue {
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
}

.snake.head.left .tongue {
  left: -12px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}

.snake.head.right .tongue {
  right: -12px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}

/* 👅 Flick animation */
@keyframes forkFlick {
  0%   { opacity: 0; transform: scaleY(0.3); }
  40%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(0.3); }
}

.snake.head.show-tongue .tongue {
  /*animation: forkFlick 0.28s linear;*/
  opacity: 1;
}


/* 💣 Bomb */
.bomb {
  position: absolute;
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  user-select: none;
  animation: bombPulse 1s infinite;
}

/* 🔥 bomb glow */
@keyframes bombPulse {
  0%,100% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px red);
  }
  50% {
    transform: scale(1.15);
    filter: drop-shadow(0 0 10px red);
  }
}



.shield {
  position: absolute;
  font-size: 20px;
  line-height: 20px;
  animation: shieldPulse 1.2s infinite;
  user-select: none;
}

@keyframes shieldPulse {
  0%,100% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px cyan);
  }
  50% {
    transform: scale(1.2);
    filter: drop-shadow(0 0 10px cyan);
  }
}

/* 🛡 Snake protected glow */
.snake.head.shielded {
  box-shadow:
    0 0 15px cyan,
    0 0 30px cyan,
    0 0 50px #00ffffaa;
}


#scoreBox {
  font-weight: 600;
  color: #fff;
}

#shieldBox {
  font-weight: 600;
  color: #00eaff;
  text-shadow: 0 0 6px rgba(0, 234, 255, 0.8);
}
#topBar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 15px;
  font-size: 14px;
}

#scoreBox{
  flex: 1;
  text-align: right;
}

#shieldBox{
  flex: 1;
  text-align: left;
  font-weight: bold;
  color: #00eaff;
}


#countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 90px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 20px #0ff, 0 0 40px #0ff;
  z-index: 999;
  display: none;
  font-family: 'Orbitron', sans-serif;
}


.snake.head.shielded {
  position: relative;
}

.snake.head.shielded::after {
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  border-radius: 50%;
  border: 2px solid rgba(0, 255, 255, 0.9);
  box-shadow:
    0 0 8px rgba(0, 255, 255, 0.8),
    0 0 16px rgba(0, 255, 255, 0.6);
  animation: shieldPulse 1.2s infinite;
  pointer-events: none;
}

@keyframes shieldPulse {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.15); opacity: 0.6; }
  100% { transform: scale(1);   opacity: 1; }
}