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

/* =============================================================================
   Pac-Man — game-specific styles.
   The map is 21 columns × 18 rows; each cell is a div to which the JS adds
   .wall / .food / .nofood, then .pacman / .ghost on top.
   The characters are drawn with radial-gradients (no external image).
   ========================================================================== */

/* Square play area (same footprint as the Snake board): the 21×18 maze is
   centered in it, the top/bottom bands stay black (board background). */
.body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--black-color);
}

#map {
  width: 100%;
  max-height: 100%;
  aspect-ratio: 21 / 18;
  display: grid;
  grid-template-columns: repeat(21, 1fr);
  grid-template-rows: repeat(18, 1fr);
  background-color: var(--black-color);
}

/* Wall: slightly rounded blue tile with a light edge (maze look). */
.wall {
  background-color: var(--pacman-wall);
  border-radius: 22%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* Corridor with a dot (radial gradient, cream tone from the palette). */
.food {
  background: radial-gradient(circle, var(--pacman-dot) 0 18%, transparent 19%);
}

/* Already-eaten corridor. */
.nofood {
  background-color: var(--black-color);
}

/* --- Pac-Man: yellow disc with a mouth (transparent sector) oriented by the
   movement. Declared after .food/.nofood to win over the cell. */
.pacman {
  border-radius: 50%;
  /* Mouth wedge centred on 90deg (right), its half-angle animated via --pac-mouth
     (see pacChomp). Eye (dark dot) laid on top; orientation via transform below. */
  --pac-mouth: 33deg;
  background:
    radial-gradient(circle at 56% 30%, var(--background-color-dark) 0 7%, transparent 8%),
    conic-gradient(
      var(--pacman-yellow) 0 calc(90deg - var(--pac-mouth)),
      transparent calc(90deg - var(--pac-mouth)) calc(90deg + var(--pac-mouth)),
      var(--pacman-yellow) calc(90deg + var(--pac-mouth)) 360deg
    );
  transform: scale(0.92);
  animation: pacChomp 0.32s ease-in-out infinite;
}
/* Left = horizontal mirror (the eye stays on top); up/down = rotations. */
.pacman--right {
  transform: scale(0.92);
}
.pacman--left {
  transform: scale(-0.92, 0.92);
}
.pacman--down {
  transform: rotate(90deg) scale(0.92);
}
.pacman--up {
  transform: rotate(-90deg) scale(0.92);
}

/* --- Ghosts: dome body + two eyes drawn with stacked radial gradients.
   The color depends on the index (.ghost--0/1/2). --- */
.ghost {
  --ghost-color: var(--ghost-red);
  border-radius: 50% 50% 20% 20%;
  background-color: var(--ghost-color);
  background-image:
    radial-gradient(circle at 36% 46%, var(--background-color-dark) 0 6%, transparent 7%),
    radial-gradient(circle at 64% 46%, var(--background-color-dark) 0 6%, transparent 7%),
    radial-gradient(circle at 37% 43%, var(--white-color) 0 13%, transparent 14%),
    radial-gradient(circle at 63% 43%, var(--white-color) 0 13%, transparent 14%);
  transform: scale(0.96);
}
.ghost--0 {
  --ghost-color: var(--ghost-red);
}
.ghost--1 {
  --ghost-color: var(--ghost-pink);
}
.ghost--2 {
  --ghost-color: var(--ghost-cyan);
}