/* Adds obstacle styling to the grid boundary movement example. */
@import url("https://www.kirupa.com/css/grid_movement_boundaries.css?v=20260825-2");

:root {
  --obstacle-cell: color-mix(in srgb, var(--demo-text) 12%, var(--demo-surface));
  --rock: color-mix(in srgb, var(--demo-text) 54%, var(--demo-surface));
  --rock-dark: color-mix(in srgb, var(--demo-text) 78%, var(--demo-surface));
  --rock-light: color-mix(in srgb, var(--demo-text) 28%, var(--demo-surface));
}

.cell.obstacle {
  background: var(--obstacle-cell);
}

.cell.obstacle::before {
  position: absolute;
  inset: 18% 13% 14%;
  border: 2px solid var(--rock-dark);
  border-radius: 46% 54% 42% 38% / 54% 48% 40% 36%;
  background:
    radial-gradient(circle at 34% 28%, var(--rock-light) 0 9%, transparent 10%),
    linear-gradient(145deg, var(--rock-light), var(--rock));
  content: "";
  transform: rotate(-3deg);
}