/* ==========================================================================
   /kombinacje-szachowe - siatka zadan i strona pojedynczego zadania
   Przepisane z c90pl-old/public/styles/puzzle-list.scss i puzzle.scss.
   Reguly .ct-* naleza do odtwarzacza z chesstempo.com - nadpisuja kolory
   planszy z board-min.css na barwy strony.
   ========================================================================== */

/* --- siatka zadan --------------------------------------------------------- */

.puzzle-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

/* 204 px = 194 px diagramu + 10 px odstepu (box-sizing: border-box z site.css).
   W kolumnie 795 px daje to dokladnie trzy kafelki w rzedzie. */
.puzzle-item {
	width: 204px;
	padding-right: 10px;
	margin-bottom: 10px;
}

.puzzle-item p {
	color: #999;
	margin-bottom: 5px;
	text-align: center;
}

.puzzle-item img {
	display: block;
	margin: 0 auto;
}

.puzzle-item .puzzle-move {
	margin-top: 5px;
	margin-bottom: 0;
	font-size: 0.9em;
}

/* --- strona pojedynczego zadania ------------------------------------------ */

/* Komentarz ma trzymac sie tytulu, a nie napisu o posunieciu.
   Odstep nad nim bierze sie z padding-bottom naglowka (site.css ma tam 40px),
   wiec zbijamy go klasa na h1 - selektor musi byc mocniejszy niz
   "#body .container h1", stad powtorzone #body .container. */
#body .container h1.puzzle-title {
	padding-bottom: 0;
	margin-bottom: 0;
}

.puzzle-note {
	margin-bottom: 40px;
}

.move-title {
	color: rgb(165, 130, 102);
}

/* Stopka strony zadania. Pierwsze zadanie nie ma "Poprzednie",
   ostatnie nie ma "Następne" - linki po prostu nie powstaja w HTML. */
.puzzle-nav a {
	margin-right: 30px;
}

.puzzle-nav a:last-child {
	margin-right: 0;
}

.puzzle-diagram {
	margin-bottom: 20px;
}

/* --- plansza odtwarzacza -------------------------------------------------- */

.ct-black-square {
	background-color: #5f4b3b;
}

.ct-white-square {
	background-color: #a58266;
}

.ct-board-border {
	border: 10px solid #17120e;
	box-sizing: unset;
}
