@import url('../global.css');

/* =============================================================================
   Snake — game-specific styles (frame/controls/score-bar = shared).
   ========================================================================== */

/* --- Board: dot grid gives depth without clashing with game elements. --- */
.play-board {
  background-color: var(--background-color-dark);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: var(--cell-size, 4%) var(--cell-size, 4%);
}

/* Snake & mouse: absolutely positioned and moved via transform (one cell =
   100% of their own size). --cell-size (= 100/gridSize %) is set in JS. */
.snake-head,
.snake-body,
.food {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cell-size, 4%);
  height: var(--cell-size, 4%);
}

/* Effects layer: covers the board, persists between renders (the snake and the
   mouse are redrawn every frame, not it). Out of the grid's flow. */
.snake-fx {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* Floating "+N" score at the eaten mouse's spot. Positioned in % by the JS;
   cleans itself up at the end of the animation. */
.score-float {
  position: absolute;
  font-size: clamp(0.75rem, 2.4vw, var(--font-size-md));
  font-weight: var(--font-weight-bolder);
  color: var(--secondary-color);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  animation: scoreFloat 0.8s ease-out forwards;
}

/* --- Snake ---
   The one-cell glide is animated by a transition on the transform, whose
   duration (--move-ms) is synced to the movement cadence (set in JS). The
   transparent border recreates the old 1px "gap" between segments
   (box-sizing: border-box). */
.snake-body {
  /* Gloss highlight via a layered gradient over the game's green accent color. */
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 55%), var(--color-snake);
  border: 1px solid transparent;
  background-clip: padding-box;
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-sm);
  transition: transform var(--move-ms, 120ms) linear;
}

.snake-head {
  z-index: 2;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, transparent 60%),
    color-mix(in srgb, var(--color-snake) 70%, #000 30%);
  border: 1px solid transparent;
  background-clip: padding-box;
  border-radius: var(--border-radius-md);
  box-shadow:
    var(--shadow-sm),
    0 0 8px rgba(34, 197, 94, 0.35);
  transition: transform var(--move-ms, 120ms) linear;
}

/* Snake eyes (oriented by direction). */
.snake-head::before,
.snake-head::after {
  content: '';
  position: absolute;
  width: 14%;
  height: 14%;
  background-color: var(--white-color);
  border-radius: 50%;
  box-shadow: var(--shadow-xs-inset);
}

.snake-head.up::before {
  left: 22%;
  top: 16%;
}
.snake-head.up::after {
  right: 22%;
  top: 16%;
}
.snake-head.down::before {
  left: 22%;
  bottom: 16%;
}
.snake-head.down::after {
  right: 22%;
  bottom: 16%;
}
.snake-head.left::before {
  left: 16%;
  top: 22%;
}
.snake-head.left::after {
  left: 16%;
  bottom: 22%;
}
.snake-head.right::before {
  right: 16%;
  top: 22%;
}
.snake-head.right::after {
  right: 16%;
  bottom: 22%;
}

/* --- Food (little mouse) ---
   The fur color goes through --mouse-color: a variant (gray/brown/white) is
   picked at random on each spawn and set as a class (.food--<variant>) by the
   JS render. Eyes and inner ear stay fixed. */
.food {
  --mouse-color: var(--mouse-gray);
}
.food--gray {
  --mouse-color: var(--mouse-gray);
}
.food--brown {
  --mouse-color: var(--mouse-brown);
}
.food--white {
  --mouse-color: var(--mouse-white);
}

.food-body {
  position: absolute;
  width: 70%;
  height: 70%;
  top: 15%;
  left: 15%;
  background-color: var(--mouse-color);
  border-radius: 60% 60% 50% 50%;
  animation: foodGlow 1.6s ease-in-out infinite;
}

.food-ear {
  position: absolute;
  width: 25%;
  height: 25%;
  top: 5%;
  background-color: var(--mouse-color);
  border-radius: 50%;
}
.food-ear.left {
  left: 20%;
}
.food-ear.right {
  right: 20%;
}
/* Pink inner ear. */
.food-ear::after {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  top: 25%;
  left: 25%;
  background-color: var(--mouse-ear-inner);
  border-radius: 50%;
}

.food-eye {
  position: absolute;
  width: 10%;
  height: 10%;
  top: 30%;
  background-color: var(--black-color);
  border-radius: 50%;
}
.food-eye.left {
  left: 28%;
}
.food-eye.right {
  right: 28%;
}

/* Pink snout, between the eyes. */
.food-nose {
  position: absolute;
  width: 12%;
  height: 10%;
  top: 44%;
  left: 44%;
  background-color: var(--mouse-ear-inner);
  border-radius: 50%;
}

.food-tail {
  position: absolute;
  width: 40%;
  height: 2px;
  bottom: 18%;
  left: 30%;
  background-color: var(--mouse-color);
  border-radius: var(--border-radius-xs);
  transform: rotate(45deg);
}