.tile--grass {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
}

.tile--dry-grass {
    background: linear-gradient(135deg, #fcd34d 0%, #d97706 100%);
}

.tile--wood {
    background: linear-gradient(135deg, #a16207 0%, #713f12 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.tile--oil {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/*
 * Oil has a subtle iridescent shimmer.
 * NB: This pseudo-element uses position:absolute, so any container using tile--oil  must have position:relative 
 * (or similar) to contain it. Game tiles have this via .tile, and toolbar swatches have it via .material-swatch.
 */
.tile--oil::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
            135deg,
            transparent 0%,
            rgba(138, 43, 226, 0.2) 25%,
            rgba(0, 191, 255, 0.2) 50%,
            rgba(138, 43, 226, 0.2) 75%,
            transparent 100%
    );
    opacity: 0.6;
}

.tile--water {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
    cursor: default;
    animation: water-shimmer 3s ease-in-out infinite;
}

.tile--water:hover {
    transform: none;
}

.tile--rock {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    cursor: default;
}

.tile--rock:hover {
    transform: none;
}

.tile--ash {
    background: linear-gradient(135deg, #525252 0%, #404040 100%);
    cursor: default;
}

.tile--ash:hover {
    transform: none;
}

@keyframes water-shimmer {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.1);
    }
}