/* Grid pattern styles */

.grid-overlay {
    opacity: 0.3;
}

/* Hex grid pattern */
.grid-hex {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66ZM28 100L0 84L0 50L28 34L56 50L56 84L28 100Z' fill='none' stroke='%234a5568' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 56px 100px;
}

/* Square grid pattern */
.grid-square {
    background-image:
        linear-gradient(to right, #4a5568 1px, transparent 1px),
        linear-gradient(to bottom, #4a5568 1px, transparent 1px);
    background-size: 50px 50px;
}

/* No grid (blank) */
.grid-none {
    background: transparent;
}