/* 1. THE GRID CONTAINER */
.puzzle-grid {
display: grid !important;
/* 7 columns at 80px each to match your JSON 'width' */
grid-template-columns: repeat(7, 80px) !important;
/* Minimal gaps; horizontal gap (6px) and vertical gap (4px) */
gap: 4px 6px !important;
justify-content: center !important;
margin: 60px auto !important;
max-width: 100% !important;
/* Prevents horizontal scrollbars during rotation */
overflow: visible !important;
}
/* 2. THE INDIVIDUAL HEXAGON TILES */
.hex-tile {
width: 80px !important;
height: 92px !important;
background-color: #555 !important; /* Fallback gray */
background-size: contain !important; /* Ensures the pipe image fits the hex */
background-repeat: no-repeat !important;
background-position: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
/* The hexagon shape */
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
/* Game mechanics: Pivot point for rotation */
transform-origin: center center !important;
transition: transform 0.3s ease-in-out !important;
cursor: pointer !important;
/* Vertical Interlocking: Pull rows up to eliminate gaps */
margin-top: -23px !important;
}
/* 3. THE HONEYCOMB OFFSET (Staggering every other row) */
/* This shifts the 2nd, 4th, and 6th rows to the right */
.hex-tile:nth-child(14n+8),
.hex-tile:nth-child(14n+9),
.hex-tile:nth-child(14n+10),
.hex-tile:nth-child(14n+11),
.hex-tile:nth-child(14n+12),
.hex-tile:nth-child(14n+13),
.hex-tile:nth-child(14n+14) {
transform: translateX(43px) !important;
}
/* 4. ROW 1 FIX: Don't pull the first 7 tiles off the top of the screen */
.hex-tile:nth-child(-n+7) {
margin-top: 0 !important;
}
/* 5. TILE LABELS (Numbers) */
.tile-label {
font-family: sans-serif !important;
font-size: 14px !important;
color: white !important;
background: rgba(0,0,0,0.4); /* Makes numbers readable over images */
padding: 2px 4px;
border-radius: 3px;
pointer-events: none; /* Clicks go through the label to the tile */
/* Hide this once your images are uploaded: display: none !important; */
}
/* 6. HOVER EFFECT */
.hex-tile:hover {
filter: brightness(1.2);
z-index: 10; /* Keeps rotating tile above others */
}
48
20
34
38
1
2
2
36
57
32
42
13
7
33
16
56
32
50
2
9
16
18
32
9
8
34
4
32
3
6
59
20
48
43
52
1
36
32
12
38
28
2
8
25
2
2
18
3
16