/* Tile Styles */
/* Defines colors and subtle texture effects for different tile types */

:root {
  --tile-size: 32px;
}

/* Common tile base style */
.tile {
  width: var(--tile-size);
  height: var(--tile-size);
  box-sizing: border-box;
  border: 1px solid #2a2a2a;
  user-select: none;
}

/* Floor tile - mossy grass */
.tile-floor {
  background: linear-gradient(135deg, #7ab87b 0%, #5f8c5f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255 255 255 / 0.15),
    inset 0 -2px 3px rgba(0 0 0 / 0.3);
  border-color: #3e7a3e;
}

/* Wall tile - rough stone */
.tile-wall {
  background: linear-gradient(145deg, #454545 0%, #2e2e2e 100%);
  box-shadow:
    inset 0 2px 4px rgba(255 255 255 / 0.1),
    inset 0 -3px 6px rgba(0 0 0 / 0.6);
  border-color: #1f1f1f;
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.6));
  position: relative;
}

/* Optional: add a subtle noise texture to wall tiles */
.tile-wall::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  background: url('data:image/svg+xml;utf8,<svg width="4" height="4" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="1" fill="rgba(255,255,255,0.05)"/></svg>') repeat;
  opacity: 0.15;
  mix-blend-mode: overlay;
}

/* Water tile (optional) */
.tile-water {
  background: linear-gradient(135deg, #3a82f7 0%, #0d3d99 100%);
  box-shadow:
    inset 0 1px 3px rgba(255 255 255 / 0.3),
    inset 0 -2px 4px rgba(0 0 0 / 0.5);
  border-color: #074bce;
  animation: waterRipple 6s infinite alternate ease-in-out;
}

@keyframes waterRipple {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.15);
  }
}