/* Snakes and Ladders (board game) specific styles.
   Reuses panel/dashboard layout from vegetable-blast.css. */

.snake-board {
	position: relative;
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	grid-template-rows: repeat(10, 1fr);
	gap: 4px;
	width: 100%;
	max-width: 520px;
	aspect-ratio: 1;
	background:
		radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.85) 0, rgba(255, 255, 255, 0) 42%),
		radial-gradient(circle at 78% 16%, rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0) 40%),
		linear-gradient(180deg, #2563eb 0%, #1d4ed8 40%, #1d4ed8 70%, #1e3a8a 100%);
	padding: 12px;
	border-radius: 24px;
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.25),
						inset 0 1px 0 rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.25);
	overflow: hidden;
}

.snake-cell {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 4px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	color: #1f2933;
	background: #ffffff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Patchwork board colors inspired by classic Snakes & Ladders */
.snake-cell:nth-child(4n+1) {
	background: #fef3c7; /* light cream */
}

.snake-cell:nth-child(4n+2) {
	background: #bbf7d0; /* soft green */
}

.snake-cell:nth-child(4n+3) {
	background: #fed7aa; /* warm orange */
}

.snake-cell:nth-child(4n) {
	background: #fecaca; /* soft red */
}

.snake-cell span.cell-number {
	z-index: 1;
	font-size: 1.08em;
}

.snake-cell.ladder::after,
.snake-cell.snake::after {
	content: '';
	position: absolute;
	inset: 6px;
	border-radius: 10px;
	opacity: 0.3;
}

.snake-cell.ladder::after {
	background: repeating-linear-gradient(
		135deg,
		rgba(46, 204, 113, 0.9),
		rgba(46, 204, 113, 0.9) 3px,
		rgba(255, 255, 255, 0.9) 6px
	);
}

.snake-cell.snake::after {
	background: repeating-linear-gradient(
		-135deg,
		rgba(231, 76, 60, 0.9),
		rgba(231, 76, 60, 0.9) 3px,
		rgba(255, 255, 255, 0.9) 6px
	);
}

.snake-cell.start {
	border: 2px solid #22c55e;
}

.snake-cell.finish {
	border: 2px solid #facc15;
	box-shadow: 0 0 14px rgba(250, 204, 21, 0.9);
}

.player-token {
	position: absolute;
	left: 6px;
	bottom: 6px;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: radial-gradient(circle at 30% 30%, #fff7e6, #f97316);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.player-token::after {
	content: '👦';
}

.player-token.token-ladder {
	box-shadow: 0 0 10px rgba(56, 189, 248, 0.9);
}

.player-token.token-snake {
	box-shadow: 0 0 10px rgba(248, 113, 113, 0.9);
}

.snake-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.dice-bounce {
	animation: diceBounce 0.35s ease-out;
}

@keyframes diceBounce {
	0% { transform: translateY(-4px); }
	50% { transform: translateY(4px); }
	100% { transform: translateY(0); }
}

@media (max-width: 600px) {
	.snake-board {
		max-width: 360px;
		padding: 8px;
		gap: 3px;
	}

	.snake-cell {
		border-radius: 10px;
		font-size: 13px;
		padding: 3px;
	}

	.player-token {
		width: 22px;
		height: 22px;
		font-size: 16px;
	}
}