:root {
	--tile-size: 70px;
}
#gameBoard {
	position: relative;
	border-radius: 5px;
	box-sizing: border-box;
	padding: 0;
	flex-shrink: 0;
	transform-origin: center center;
	contain: layout style;
	will-change: transform;
}
.tile {
	position: absolute;
	left: var(--tile-x, 0px);
	top: var(--tile-y, 0px);
	z-index: var(--tile-level, 0);

	width: var(--tile-width, 70px);
	height: var(--tile-height, 83.6px);

	background-color: var(--tile-color);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;

	border: 0px solid var(--accent);
	border-radius: 5px;
	box-sizing: border-box;

	box-shadow:
		4px 4px 5px 5px rgba(0, 0, 0, 0.5),
		inset 2px 2px 3px rgba(255, 255, 255, 0.25),
		inset -2px -2px 3px rgba(0, 0, 0, 0.3);

	contain: layout style;
	user-select: none;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	cursor:pointer;
}

.tile::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(0, 0, 0, 0.20);
	opacity: 0;
	pointer-events: none;
}
.tile.blocked {
    cursor: not-allowed;
}
.tile.blocked::after {
	opacity: 1;

}

.tile.selected {
	z-index: 240;
	transform: translateY(-3px);
	box-shadow:
		0 0 0 1px rgba(0,0,0,0.3),
		0 0 6px var(--tile-accent),
		2px 5px 8px rgba(0, 0, 0, 0.65),
		inset 2px 2px 3px rgba(255, 255, 255, 0.25),
		inset -2px -2px 3px rgba(0, 0, 0, 0.3);
}

.tile.gone {
	visibility: hidden;
	pointer-events: none;
}

/* Brief feedback when two free tiles do not match. */
.tile.no-match {
	animation: noMatchFlash 180ms ease-out;
}

@keyframes noMatchFlash {
    0%   { filter: brightness(1); }
    40%  { filter: brightness(0.6); }
    100% { filter: brightness(1); }
}

/* Lightweight layer-by-layer deal animation. */
.tile.dealing {
	animation: tileDeal 220ms ease-out backwards;
	animation-delay: var(--deal-delay, 0ms);
}

@keyframes tileDeal {
	from {
		opacity: 0;
		transform: scale(0.92);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Matched tiles leave the play field instead of disappearing in place. */
.tile.matched-fly {
	pointer-events: none;
	z-index: 300;
	will-change: transform, opacity;
	animation: tileFlyOff var(--fly-duration, 650ms) cubic-bezier(0.22, 0.72, 0.28, 1) forwards;
}

@keyframes tileFlyOff {
	0% {
		transform: translateY(-3px) rotate(0deg) scale(1);
		opacity: 1;
	}
	12% {
		transform: translateY(-8px) rotate(var(--fly-kick-rotate, 14deg)) scale(1.06);
		opacity: 1;
	}
	100% {
		transform: translate(var(--fly-x, 100vw), var(--fly-y, 0px)) rotate(var(--fly-rotate, 360deg)) scale(0.88);
		opacity: 0;
	}
}

@media (hover: hover) and (pointer: fine) {
	.tile:not(.blocked):not(.gone):hover {
		transform: translateY(-1px);
	}

	.tile.selected:hover {
		transform: translateY(-3px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tile,
	.tile:hover,
	.tile.selected {
		transform: none;
	}

	.tile.matched-fly,
	.tile.dealing,
	.tile.no-match {
		animation-duration: 1ms;
		animation-delay: 0ms;
	}
}

/* Optional virtual-grid overlay for development: add .show-grid to #gameBoard. */
#gameBoard.show-grid { outline: 1px dashed var(--text-secondary); outline-offset: -1px; }