.grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(4, 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;
	/* Ensure the grid fills its container so tracks compute correctly */
	width: 100%;
	height: 100%;
}

.grid button.tile {
	display: grid;
	place-items: center;
	width: 100%;
	/* Lock square tiles regardless of image aspect */
	aspect-ratio: 1 / 1;
	/* Do not let images change the tile height */
	height: auto;
	padding: 0; /* remove inner padding */
	border: 0; /* remove inner border so image is edge-to-edge */
	background: transparent;
	color: var(--text);
	border-radius: 8px;
	/* Persistent subtle purple border on all tiles (similar to bonus tasks on main) */
	box-shadow: inset 0 0 0 3px rgba(139, 92, 246, 0.5);
	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;
}


.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;
	z-index: 1;
}
.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;
	z-index: 1;
}
.grid button.tile.is-green::after {
	opacity: 1;
}
.grid button.tile.is-green::before {
	opacity: 0.22; /* faint green fill; a bit stronger */
}

/* rolling mode is not used on prestige anymore; keep greens visible */

/* Image in tile */
.grid button.tile img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
	/* No cropping; scale down to fit both sides */
	pointer-events: none; /* clicks go to the button */
	z-index: 0;
}

/* Rolling animation highlight */
/* Rolling animation highlight (variant by difficulty)
	Medium = light purple, Hard = dark purple */
.grid button.tile.is-rolling-easy::before { background: #a78bfa; opacity: 0.25; }
.grid button.tile.is-rolling-easy::after { box-shadow: inset 0 0 0 3px #a78bfa; opacity: 1; }
.grid button.tile.is-rolling-medium::before { background: #a78bfa; opacity: 0.25; }
.grid button.tile.is-rolling-medium::after { box-shadow: inset 0 0 0 3px #a78bfa; opacity: 1; }
.grid button.tile.is-rolling-hard::before { background: #7c3aed; opacity: 0.25; }
.grid button.tile.is-rolling-hard::after { box-shadow: inset 0 0 0 3px #7c3aed; 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: #a78bfa; opacity: 0.18; }
.grid button.tile.is-option-medium::after { box-shadow: inset 0 0 0 2px #a78bfa; opacity: 1; }
.grid button.tile.is-option-hard::before { background: #7c3aed; opacity: 0.18; }
.grid button.tile.is-option-hard::after { box-shadow: inset 0 0 0 2px #7c3aed; 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 #a78bfa; }
.grid button.tile.is-option-selected.is-option-hard::after { box-shadow: inset 0 0 0 3px #7c3aed; }

/* 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);
}

/* Full-board celebration: radial burst from center */
@keyframes boardBurst {
  0% { transform: scale(1); filter: brightness(1) saturate(1); }
  30% { transform: scale(1.08); filter: brightness(1.25) saturate(1.2); }
  60% { transform: scale(0.98); filter: brightness(1.05) saturate(1.1); }
  100% { transform: scale(1); filter: brightness(1) saturate(1); }
}
.grid button.tile.is-burst {
  animation: boardBurst 0.9s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: var(--burst-delay, 0ms);
}