/* Cuadrícula principal (index) - no modificar fórmulas para mantener pixel-perfect */
:root {
  --scale: 3.409;
  --unit: 1px;
  --cell-size: calc(18 * var(--scale) * var(--unit));
  --sprite-size: calc(16 * var(--scale) * var(--unit));
  --cell-gap: calc(14 * var(--scale) * var(--unit));
  --offset-top: calc(17 * var(--scale) * var(--unit));
  --row-height: var(--cell-size);
  --grid-columns: 9;
}

.container {
  position: relative;
  width: 600px;
}

.center-image {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.grid-overlay {
  position: absolute;
  left: calc(7 * var(--scale) * var(--unit));
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), var(--cell-size));
  pointer-events: none;
}

.grid-overlay-top {
  top: var(--offset-top);
  grid-template-rows: repeat(3, var(--row-height));
}

.grid-overlay-bottom {
  top: calc(var(--offset-top) + (3 * var(--row-height)) + var(--cell-gap));
  grid-template-rows: repeat(3, var(--row-height));
}

.grid-overlay-hotbar {
  top: calc(var(--offset-top) + (3 * var(--row-height)) + var(--cell-gap) + (3 * var(--row-height)) + (4 * var(--scale) * var(--unit)));
  grid-template-columns: repeat(var(--grid-columns), var(--cell-size));
  grid-template-rows: var(--row-height);
}

.cell {
  width: var(--cell-size);
  height: var(--cell-size);
  box-sizing: border-box;
  pointer-events: auto;
}

.cell a {
  display: block;
  width: 100%;
  height: 100%;
  transition: background-color 0.2s;
}

.sprite {
  width: var(--sprite-size);
  height: var(--sprite-size);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: transform 0.2s;
  margin: auto;
  margin-top: calc(0.7 * var(--scale) * var(--unit));
}

.sprite.NoPixel {
  image-rendering: auto;
}

.cell a:hover .sprite {
  transform: scale(1.2);
}