/* Bedburger Schachverein – Schachbrett (gemeinsam für alle Bretter) und Ton an/aus. Paket zu style.css, geladen von inc/css-pakete.php. */

/* Brett: gemeinsam für alle Bretter (Aufgabe, Partie, Training, Schach lernen, Sprint, Eingabe) */
.board {
	--light: #e9eae2;
	--dark: #6b9ad4;
	--mark: rgba(232, 196, 74, 0.6);
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	aspect-ratio: 1;
	border: clamp(5px, 0.9vw, 9px) solid var(--bsv-black);
	border-radius: var(--bsv-radius);
	background: var(--bsv-black);
	box-shadow: 0 22px 50px rgba(5, 14, 17, 0.18);
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.sq {
	position: relative;
	display: block;
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: var(--light);
	color: inherit;
	font: inherit;
	cursor: default;
	touch-action: manipulation;
}

.sq--dark {
	background-color: var(--dark);
}

.board > .sq:first-child { border-top-left-radius: 2px; }
.board > .sq:nth-child(8) { border-top-right-radius: 2px; }
.board > .sq:nth-child(57) { border-bottom-left-radius: 2px; }
.board > .sq:last-child { border-bottom-right-radius: 2px; }

.puzzle.is-ready .sq {
	cursor: pointer;
}

.puzzle.is-solved .sq,
.puzzle.is-static .sq {
	cursor: default;
}

.piece {
	position: absolute;
	top: 4%;
	left: 4%;
	z-index: 1;
	width: 92%;
	height: 92%;
	pointer-events: none;
	will-change: transform;
}

.piece.is-moving {
	z-index: 5;
}

.coord {
	position: absolute;
	z-index: 2;
	font-size: clamp(0.5625rem, 0.45rem + 0.45vw, 0.75rem);
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}

.coord--rank {
	top: 0.3em;
	left: 0.35em;
}

.coord--file {
	right: 0.35em;
	bottom: 0.25em;
}

.sq--light .coord {
	color: var(--bsv-blue-deep);
}

.sq--dark .coord {
	color: var(--light);
}

.sq.is-last {
	background-image: linear-gradient(var(--mark), var(--mark));
}

.sq.is-selected {
	background-image: linear-gradient(rgba(232, 196, 74, 0.85), rgba(232, 196, 74, 0.85));
}

.sq.is-target::after {
	content: "";
	position: absolute;
	top: 37%;
	left: 37%;
	width: 26%;
	height: 26%;
	border-radius: 50%;
	background: rgba(5, 14, 17, 0.25);
}

.sq.is-capture::after {
	content: "";
	position: absolute;
	inset: 3%;
	border: 0.35rem solid rgba(5, 14, 17, 0.25);
	border-radius: 50%;
}

.sq.is-check {
	background-image: radial-gradient(circle, rgba(214, 48, 49, 0.95) 0, rgba(214, 48, 49, 0.55) 40%, transparent 72%);
}

.sq.is-wrong {
	background-image: linear-gradient(rgba(214, 48, 49, 0.45), rgba(214, 48, 49, 0.45));
	animation: bsv-shake 0.35s ease;
}

@keyframes bsv-shake {
	25% { transform: translateX(-3px); }
	75% { transform: translateX(3px); }
}

/* Rückmeldung am Feld: grüner Haken nach einem richtigen Zug, rotes X nach einem falschen. */
.sq__ok,
.sq__no {
	position: absolute;
	top: 3%;
	right: 3%;
	z-index: 4;
	width: 34%;
	min-width: 15px;
	max-width: 26px;
	aspect-ratio: 1;
	border-radius: 50%;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(5, 14, 17, 0.35);
	pointer-events: none;
	animation: bsv-ok-pop 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.35) both;
}

.sq__ok {
	background-color: #1d8a3e;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 82%;
}

.sq__no {
	background-color: #d0302f;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 7.5l9 9m0-9l-9 9' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: 78%;
}

.sq__no.is-leaving {
	animation: bsv-badge-out 0.26s ease both;
}

@keyframes bsv-badge-out {
	to {
		opacity: 0;
		transform: scale(0.6);
	}
}

@keyframes bsv-ok-pop {
	from {
		opacity: 0;
		transform: scale(0.3);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.sq:focus-visible {
	z-index: 3;
	outline: 3px solid var(--bsv-black);
	outline-offset: -3px;
	box-shadow: inset 0 0 0 5px var(--bsv-white);
}

/* Markierte Figur (zweiter Tipp) */
.sq.is-hint::before {
	content: "";
	position: absolute;
	inset: 4%;
	z-index: 3;
	border: 0.3rem solid #e8a400;
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75), 0 0 14px rgba(232, 164, 0, 0.7);
	pointer-events: none;
	animation: bsv-hint-pulse 1.4s ease-in-out infinite;
}

@keyframes bsv-hint-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(0.9); opacity: 0.75; }
}

/* Ton an/aus (assets/js/src/ton.js) – gemeinsam für Aufgaben, Training, Schach lernen und Sprint */
.ton-knopf.is-aus {
	color: var(--bsv-muted);
}

.sprint-start__ton {
	margin-left: auto;
}

.sprint-spiel__ton {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--bsv-white);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.sprint-spiel__ton:hover {
	background: rgba(255, 255, 255, 0.12);
}

.sprint-spiel__ton:focus-visible {
	outline: 2px solid var(--bsv-white);
	outline-offset: 1px;
}

.sprint-spiel__ton.is-aus {
	color: rgba(255, 255, 255, 0.55);
}