chess.css

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Inter", sans-serif;
}

body {
	background: #1e1e2e;
	color: #cdd6f4;
	overflow-x: hidden;
}

.board-container {
	width: 600px;
	max-width: 90%;
	justify-content: center;
	margin: auto;
	position: relative;
	perspective: 1000px;
}

.semataries {
	width: 100%;
	margin: auto;
	display: flex;
	justify-content: center;
	gap: 20px;
}

.sematary {
	width: 50%;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	justify-content: center;
}

#blackSematary { text-align: right; }

#board {
	aspect-ratio: 1 / 1;
	margin: auto;
	border: 3px solid #313244;
	border-radius: 15px;
	position: relative;
	box-shadow: 0 0 20px #74c7ec inset, 0 0 50px #74c7ec;
	transform-style: preserve-3d;
	transition: transform 1s ease;
	background: linear-gradient(135deg, #1e1e2e, #262636);
}

/* Neon squares */
#board div div {
	float: left;
	width: calc(100% / 8);
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	border: #313244 solid 1px;
	position: relative;
	transition: all 0.3s ease;
}

#board .even div:nth-child(even),
#board .odd div:nth-child(odd) { background: #45475a; }
#board .even div:nth-child(odd),
#board .odd div:nth-child(even) { background: #1e1e2e; }

/* Pulsating squares */
@keyframes squareGlow {
	0% { box-shadow: inset 0 0 0px #0ff; }
	50% { box-shadow: inset 0 0 12px #0ff; }
	100% { box-shadow: inset 0 0 0px #0ff; }
}
#board .square {
	animation: squareGlow 4s ease-in-out infinite alternate;
}

/* Hover on squares */
#board .square:hover {
	box-shadow: 0 0 15px #0ff, 0 0 25px #74c7ec inset;
	transform: scale(1.05);
	z-index: 2;
}

/* Floating pieces */
@keyframes floatPiece {
	0% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 5px #0ff); }
	50% { transform: translateY(-5%) scale(1.05); filter: drop-shadow(0 0 15px #0ff); }
	100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 5px #0ff); }
}
img.piece {
	width: 100%;
	height: 100%;
	float: left;
	transition: transform 0.3s ease, filter 0.3s ease;
	animation: floatPiece 3s ease-in-out infinite;
}

/* Board aura */
#board::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 15px;
	background: linear-gradient(45deg, #0ff, #74c7ec, #0ff, #74c7ec);
	filter: blur(20px);
	opacity: 0.2;
	z-index: -1;
	animation: rotateAura 10s linear infinite;
}
@keyframes rotateAura {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Move highlights */
.allowed { opacity: .9; background: #74c7ec !important; border: 1px solid #0ff !important; box-shadow: 0 0 12px #0ff inset; }
.last-move { background: #a6e3a1 !important; box-shadow: 0 0 12px #a6e3a1 inset; }
.clicked-square { background: #f38ba8 !important; box-shadow: 0 0 12px #f38ba8 inset; }

/* Sematary pieces */
.sematary img { transform: rotateZ(0); width: 2rem; height: 2rem; filter: drop-shadow(0 0 5px #0ff); }

/* Flip board animation */
.animate { animation: rotateBoard 1s ease-out; animation-fill-mode: both; }
@keyframes rotateBoard { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(180deg); } }
.animate-backward { animation: rotateBoardBackward 1s ease-out; animation-fill-mode: both; }
@keyframes rotateBoardBackward { 0% { transform: rotateY(180deg); } 100% { transform: rotateY(0deg); } }

/* Scenes */
.scene { position: fixed; opacity: 0; display: none; z-index: 1; width: 100%; height: 100%; }
.overlay { position: fixed; width: 100%; height: 100%; background: #000; opacity: 0.7; z-index: 1; }
.scene .scene-content {
	position: fixed; color: #cdd6f4; z-index: 2;
	width: 100%; text-align: center; margin-top: 30vh; font-size: 40px;
	height: 100vh; text-shadow: 0 0 10px #0ff, 0 0 20px #74c7ec;
	animation: glowText 2s ease-in-out infinite alternate;
}
@keyframes glowText {
	from { text-shadow: 0 0 5px #0ff, 0 0 10px #74c7ec; }
	to { text-shadow: 0 0 15px #0ff, 0 0 30px #74c7ec; }
}
.show { display: block !important; animation: showMessage 1s ease-out; animation-fill-mode: both; }
@keyframes showMessage { 0% { opacity: 0; } 100% { opacity: 1; } }

/* Turn display */
#turn { text-align: center; font-size: 18px; color: #cdd6f4; text-shadow: 0 0 10px #74c7ec; }

/* Flip button */
.flip-board {
	padding: 12px 24px; border-radius: 10px; outline: none;
	background: linear-gradient(45deg, #0ff, #74c7ec); color: #11111b; border: none;
	cursor: pointer; font-weight: bold; transition: all 0.3s ease;
	box-shadow: 0 0 10px #0ff, 0 0 20px #74c7ec inset;
}
.flip-board:hover {
	background: linear-gradient(45deg, #74c7ec, #0ff); transform: scale(1.1);
	box-shadow: 0 0 20px #0ff, 0 0 40px #74c7ec inset;
}

/* Radio buttons */
input[type="radio"] { display: none; }
label {
	background-color: #313244; color: #cdd6f4; position: relative;
	cursor: pointer; display: inline-flex; align-items: center; gap: 0.8em;
	padding: 1em 2em; border-radius: 0.5em; font-size: 23px;
	transition: all 0.3s ease; box-shadow: 0 0 5px #74c7ec;
}
input[type="radio"]:checked + label {
	background-color: #74c7ec; color: #11111b; box-shadow: 0 0 10px #0ff, 0 0 20px #74c7ec;
}

/* Buttons */
.button {
	background-color: #313244; border-radius: 10px; border: none;
	color: #cdd6f4; padding: 20px 40px; text-align: center; display: inline-block;
	font-size: 20px; cursor: pointer; box-shadow: 0 0 8px #0ff; transition: all 0.3s ease;
}
.button:hover, label:hover {
	background-color: #45475a; transform: scale(1.05);
	box-shadow: 0 0 15px #0ff, 0 0 25px #74c7ec;
}
.button-big { padding: 30px 60px; font-size: 25px; }