.grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(8, 1fr);
	gap: var(--grid-gap, 6px);
	background: var(--bg);
	padding: 0; /* remove outer padding so edge tiles are flush */
	border: none; /* no border shown on grid container */
	border-radius: 12px;
}

/* Bonus grid (defaults to 2 columns x 7 rows) - share the same tile styling */
#bonus-grid.grid {
	/* Use CSS vars so we can swap layout in portrait */
	--bonus-cols: 2;
	--bonus-rows: 7;
	grid-template-columns: repeat(var(--bonus-cols), 1fr);
	grid-template-rows: repeat(var(--bonus-rows), 1fr);
	/* Let height follow width for stable squares */
	aspect-ratio: var(--bonus-cols) / var(--bonus-rows);
	max-width: 100%; /* prevent overflow on small screens */
}

/* Add a bit of inner padding on bonus tiles to reduce image edge clipping */
#bonus-grid.grid button.tile {
	padding: 10%;
	background: var(--bg);
}

.grid button.tile {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 0; /* remove inner padding */
	border: 0; /* remove inner border so image is edge-to-edge */
	background: transparent;
	color: var(--text);
	border-radius: 8px;
	overflow: hidden; /* clip image to rounded corners */
	position: relative; /* anchor overlay ring */
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, transform .05s ease;
	user-select: none;
}

/* Difficulty borders for bonus tiles (persistent, behind overlay) */
#bonus-grid.grid button.tile.diff-easy::after,
#bonus-grid.grid button.tile.diff-medium::after,
#bonus-grid.grid button.tile.diff-hard::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 3px transparent;
	opacity: 1; /* always visible */
	pointer-events: none;
}

#bonus-grid.grid button.tile.diff-easy::after { box-shadow: inset 0 0 0 3px #16a34a79; }
#bonus-grid.grid button.tile.diff-medium::after { box-shadow: inset 0 0 0 3px #f59f0b85; }
#bonus-grid.grid button.tile.diff-hard::after { box-shadow: inset 0 0 0 3px #ef444480; }

.grid button.tile:hover {
	outline: none;
	background: var(--surface-2);
}

.grid button.tile:active {
	transform: translateY(1px);
}

/* Overlay green ring above the image without changing layout */
.grid button.tile::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	/* Use explicit green so it stays green regardless of theme text color */
	background: #16a34a;
	opacity: 0; /* faint overlay hidden by default */
	transition: opacity .15s ease;
	pointer-events: none;
}
.grid button.tile::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 3px #16a34a;
	opacity: 0;
	transition: opacity .15s ease;
	pointer-events: none;
}
.grid button.tile.is-green::after {
	opacity: 1;
}
.grid button.tile.is-green::before {
	opacity: 0.22; /* faint green fill; a bit stronger */
}

/* Image in tile */
.grid button.tile img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover; /* fill the tile fully */
	pointer-events: none; /* clicks go to the button */
}

/* Rolling animation highlight */
/* Rolling animation highlight (variant by difficulty) */
.grid button.tile.is-rolling-easy::before { background: #16a34a; opacity: 0.25; }
.grid button.tile.is-rolling-easy::after { box-shadow: inset 0 0 0 3px #16a34a; opacity: 1; }
.grid button.tile.is-rolling-medium::before { background: #f59e0b; opacity: 0.25; }
.grid button.tile.is-rolling-medium::after { box-shadow: inset 0 0 0 3px #f59e0b; opacity: 1; }
.grid button.tile.is-rolling-hard::before { background: #ef4444; opacity: 0.25; }
.grid button.tile.is-rolling-hard::after { box-shadow: inset 0 0 0 3px #ef4444; opacity: 1; }

/* Persistent option highlights (until lock-in) */
.grid button.tile.is-option-easy::before { background: #16a34a; opacity: 0.18; }
.grid button.tile.is-option-easy::after { box-shadow: inset 0 0 0 2px #16a34a; opacity: 1; }
.grid button.tile.is-option-medium::before { background: #f59e0b; opacity: 0.18; }
.grid button.tile.is-option-medium::after { box-shadow: inset 0 0 0 2px #f59e0b; opacity: 1; }
.grid button.tile.is-option-hard::before { background: #ef4444; opacity: 0.18; }
.grid button.tile.is-option-hard::after { box-shadow: inset 0 0 0 2px #ef4444; opacity: 1; }

/* Selected (locked-in) task: stronger ring */
.grid button.tile.is-option-selected::before { opacity: 0.22; }
.grid button.tile.is-option-selected.is-option-easy::after { box-shadow: inset 0 0 0 3px #16a34a; }
.grid button.tile.is-option-selected.is-option-medium::after { box-shadow: inset 0 0 0 3px #f59e0b; }
.grid button.tile.is-option-selected.is-option-hard::after { box-shadow: inset 0 0 0 3px #ef4444; }

/* Active (locked-in) task highlight: bright gold outline above all overlays */
.grid button.tile.is-active-task {
	outline: 3px solid var(--yellow);
	outline-offset: 3px;
	/* strong dual ring + glow to ensure visibility */
	box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.85), 0 0 8px 2px rgba(250, 204, 21, 0.5);
	z-index: 2;
}

/* Row completion wave: subtle pulse sweeping left to right */
@keyframes rowWavePulse {
	0% { transform: scale(1); filter: brightness(1); }
	30% { transform: scale(1.03); filter: brightness(1.15); }
	60% { transform: scale(1.01); filter: brightness(1.05); }
	100% { transform: scale(1); filter: brightness(1); }
}
.grid button.tile.is-row-wave {
	animation: rowWavePulse 0.6s ease both;
	animation-delay: var(--wave-delay, 0ms);
}

/* Column completion wave: reuse same pulse timing */
.grid button.tile.is-col-wave {
	animation: rowWavePulse 0.6s ease both;
	animation-delay: var(--wave-delay, 0ms);
}