@font-face {

  font-family: 'Poppins';

  src: url('../webfonts/poppins/Poppins-Regular.ttf') format('truetype');

  font-weight: normal;

  font-style: normal;

}



* {

	box-sizing: border-box;

	-webkit-font-smoothing: antialiased;

	text-rendering: optimizeLegibility;

	scroll-behavior: smooth;

	touch-action: manipulation;

}

html,

body {

	height: 100%;

	overflow: hidden;

}



:root {

	color-scheme: light dark;

	--bg-light: #cecece;

	--bg-dark: #333;

	--highlight-color: #e0ffbc;

	--highlight-dark: #9ab379;

	--target-color: rgba(255, 0, 0, 0.2);

	--target-border: rgba(255, 0, 0, 0.4);

	--debug-highlight: rgba(0, 255, 0, 0.3);

	--debug-path: rgba(0, 0, 255, 0.3);

	--text-color-light: #333;

	--text-color-dark: #eee;

}

[data-theme="light"] {

	color-scheme: light only;

}



#moveCount {

        margin-top: 40px;

}



[data-theme="dark"] {

	color-scheme: dark only;

}

body {

	display: flex;

	flex-direction: row;

	flex-wrap: wrap;

	justify-content: center;

	align-items: center;

	text-align: center;

	margin: 0;

	font-family: Poppins;

	color: light-dark(var(--text-color-light), var(--text-color-dark));

}

body,

.intro-screen,

.info-screen {

	background: linear-gradient(#333, #171a21);

	background: linear-gradient(

		196deg,

		light-dark(var(--bg-light), #3b434a),

		light-dark(#aaa, #171a21)

	);

}

[data-theme="light"] :is(body, .intro-screen, .info-screen) {

	background: linear-gradient(196deg, var(--bg-light), #aaa);

}

[data-theme="dark"] :is(body, .intro-screen, .info-screen) {

	background: linear-gradient(196deg, #3b434a, #171a21);

}

select,

input,

button {

	font-family: Poppins;

	border-radius: 6px;

	padding: 4px 6px;

	cursor: pointer;

	-webkit-user-select: none;

	-ms-user-select: none;

	user-select: none;

}



header {

	position: absolute;

	top: 20px;

	width: 100%;

	z-index: 200;

	display: flex;

	align-items: center;

	justify-content: space-between;

	padding: 8px 12px;

}

header .logo {

	text-decoration: none;

	color: light-dark(var(--bg-dark), var(--bg-light));

	display: flex;

	align-items: center;

	-webkit-user-select: none;

	-ms-user-select: none;

	user-select: none;

	cursor: pointer;

	font-size: 1.2em;

	font-weight: bold;

}

header .logo i {

	font-size: 1.5em;

	margin-right: 8px;

}



.top-controls {

	display: flex;

	gap: 8px;

}



.control-btn {

	display: flex;

	align-items: center;

	justify-content: center;

	background: light-dark(var(--text-color-light), var(--text-color-dark));

	color: light-dark(var(--text-color-dark), var(--text-color-light));

	border: none;

	border-radius: 50%;

	width: 36px;

	height: 36px;

	font-size: 18px;

	cursor: pointer;

	transition: all 0.2s ease;

	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

}



.control-btn:hover {

	transform: translateY(1px);

	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

}



.language-selector {

	position: relative;

}



.language-dropdown {

	display: none;

	position: absolute;

	top: 100%;

	left: 0;

	background: light-dark(var(--bg-dark), var(--bg-light));

	color: light-dark(var(--bg-light), var(--bg-dark));

	border-radius: 4px;

	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

	z-index: 100;

	min-width: 100px;

	margin-top: 4px;

}



.language-selector:hover .language-dropdown,

.language-dropdown.show {

	display: block;

}



.language-option {

	padding: 6px 12px;

	cursor: pointer;

	text-align: left;

	white-space: nowrap;

}



.language-option:hover {

	background: rgba(255, 255, 255, 0.1);

}



.mid-header {

	gap: 12px;

	display: none;

	align-items: center;

}

@media screen and (max-width: 680px) {

	.mid-header {

		position: fixed;

		top: unset;

		bottom: 100px;

		justify-content: space-between;

		flex-wrap: wrap;

		padding: 0 24px;

	}

	.mid-header > :nth-child(n + 2) {

		width: 30%;

	}

	.mid-header > :nth-child(-n + 2) {

		width: 44%;

		order: 1;

	}

	.mid-header > * {

		width: fit-content;

	}

	.mid-header .btn:hover svg {

		top: 2px;

	}

}



.intro-screen,

.info-screen {

	position: absolute;

	width: 100%;

	height: 100%;

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: center;



	-webkit-user-select: none;

	-ms-user-select: none;

	user-select: none;

}

.intro-screen {

	z-index: 100;

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: center;

	padding-bottom: 50px; /* Add space for footer */

}

.intro-screen h2, .info-screen h2 {

    font-size: 2em;

    margin-bottom: 0;

    line-height: 100%;

    text-shadow: 0 2px 3px #000;

    margin-top: 0px;

    margin-top: 140px;

}



.intro-screen p {

	margin-top: 0;

}

.intro-screen p,

.info-screen p {

	margin-bottom: 2em;

	padding: 0 16px;

	text-shadow: 0 2px 3px #000;

}

.intro-screen p a {

	text-decoration: none;

	color: inherit;

}

.intro-screen p a:hover {

	text-decoration: underline;

}

.btn,

.btn-text,

.btn i {

	transition: all 0.2s ease-in-out;

}

.btn {

	position: relative;

	border: none;

	padding: 6px 18px;

	border-radius: 4px;

	background: light-dark(var(--text-color-light), var(--text-color-dark));

	color: light-dark(var(--text-color-dark), var(--text-color-light));

	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

	cursor: pointer;

	overflow: hidden;

	white-space: nowrap;

	margin-top: 45px;

}

.btn:hover {

	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

	transform: translateY(1px);

}

.btn:hover .btn-text {

	filter: blur(5px);

}

.btn i {

	width: 24px;

	height: 24px;

	position: absolute;

	left: 0;

	right: 0;

	margin: auto;

	top: 42px;

}

.btn:hover i {

	top: 10px;

}

.btn.btn-rotate:hover i {

	animation: btn-rotate 1s ease-in-out forwards;

}

@keyframes btn-rotate {

	0% {

		rotate: 0deg;

	}

	100% {

		rotate: -360deg;

	}

}

.btn.btn-right:hover i {

	animation: btn-right 0.4s ease-in-out forwards;

}

@keyframes btn-right {

	0% {

		left: -124%;

	}

	100% {

		left: 0;

	}

}



select {

	-webkit-appearance: none;

	-moz-appearance: none;

	appearance: none;

	background-color: #fff;

	border: 1px solid #ccc;

	border-radius: 4px;

	padding: 6px 16px;

	font-size: 0.9em;

	line-height: 142%;

	color: #333;

}

select:focus {

	outline: none;

	border-color: #a0bacf;

	box-shadow: 0 0 5px rgba(191, 201, 209, 0.6);

}



.info-screen {

	z-index: 99;

	padding-bottom: 50px; /* Add space for footer */

}

.info-screen h2 {

	font-size: 2em;

	margin-bottom: 0;

	line-height: 100%;

}

.intro-screen > img {

	position: absolute;

	opacity: 0.1;

	width: min(400px, 50vw);

	pointer-events: none;

	z-index: -1;

}



.level-clear {

	position: absolute;

	background: light-dark(#fffc, #000c);

	width: 100%;

	height: 100%;

	display: flex;

	justify-content: center;

	align-items: center;

	z-index: 101;

}

.lvl-clear-box {

	background: light-dark(var(--bg-light), var(--bg-dark));

	border: 1px solid light-dark(var(--bg-dark), var(--bg-light));

	box-shadow: 0 4px 12px 0 #0004;

	color: light-dark(var(--bg-dark), var(--bg-light));

}

.lvl-clear-box h2 {

	padding: 16px;

	border-bottom: 1px solid light-dark(var(--bg-dark), var(--bg-light));

	padding-bottom: 12px;

	margin-top: 0;

}

.lvl-clear-box p {

	line-height: 100%;

	padding: 0;

	padding-bottom: 8px;

	margin: 8px 0;

}

.lvl-clear-box span:not(.btn-text) {

	font-weight: 1000;

	font-size: 1.2em;

	margin-right: 12px;

	display: inline-block;

	text-align: center;

}



.lvl-clear-box .next-lvl,

.lvl-clear-box .same-lvl {

	background: light-dark(var(--bg-dark), var(--bg-light));

	color: light-dark(var(--bg-light), var(--bg-dark));

	width: fit-content;

	margin: auto;

	padding: 4px 16px;

	margin-bottom: 24px;

	cursor: pointer;

}

.lvl-clear-box .same-lvl {

	scale: 0.8;

}



#scoreboard-container {

	display: none;

	position: absolute;

	height: 100%;

	width: 100%;

	justify-content: center;

	align-items: center;

	z-index: 102;

	background-color: #000a;

}

#scoreboard-container.show {

	display: flex;

}

.scoreboard {

	min-width: min(80vw, 242px);

	max-width: calc(100% - 16px);

	height: fit-content;



	position: relative;

	margin: auto;

	background: light-dark(#fffc, #000c);

	padding: 0 12px;

	border: 1px solid light-dark(var(--bg-dark), var(--bg-light));

	box-shadow: 0 4px 12px 0 #0004;

	-webkit-user-select: none;

	-ms-user-select: none;

	user-select: none;

}

.scoreboard #close-score {

	position: absolute;

	right: 4px;

	top: 4px;

	line-height: 100%;

	cursor: pointer;

	font-size: 1em;

	width: 24px;

	height: 24px;

	display: flex;

	align-items: center;

	justify-content: center;

}

.scoreboard #close-score i {

	color: light-dark(#000c, #fffc);

}

.scoreboard #close-score:hover i {

	color: light-dark(rgba(92, 92, 92, 0.8), rgba(129, 129, 129, 0.8));

}

.scoreboard h2 {

	line-height: 100%;

	margin: 12px;

}

.scoreboard hr {

	margin: 0;

}

.scores {

	display: flex;

	flex-direction: column;

	flex-wrap: wrap;

	max-height: 300px;

	max-height: min(50vh, 320px);

	overflow: hidden;

	margin-bottom: 4px;

}

.scoreboard p {

	text-align: left;

	line-height: 100%;

	padding: 0;

	padding-bottom: 3px;

	margin: 3px 0 0 0;

	width: 100px;

	white-space: nowrap;

}

.scoreboard p:not(:last-child) {

	border-bottom: 1px solid #fff3;

}

.scoreboard span {

	background: light-dark(var(--bg-dark), var(--bg-light));

	color: light-dark(var(--bg-light), var(--bg-dark));

	padding: 4px;

	margin-right: 12px;

	width: 54px;

	display: inline-block;

	text-align: center;

	font-weight: 800;

	white-space: nowrap;

}



#chessboard {

	--size: min(min(12vw, 10vh), 64px);

	display: grid;

	align-items: center;

	justify-content: center;

	grid-template-columns: repeat(var(--cols, 8), var(--size));

	grid-template-rows: repeat(var(--rows, 8), var(--size));

	gap: 2px;

	margin-bottom: 20px;

	position: relative;

}

.square {

	width: var(--size);

	height: var(--size);

	display: flex;

	justify-content: center;

	align-items: center;

	font-size: 24px;

	border: 1px solid light-dark(#0002, #fff3);



	color: transparent;



	position: relative;

	cursor: grab;



	-webkit-user-select: none;

	-ms-user-select: none;

	user-select: none;



	transform-style: preserve-3d;

	transform: rotateY(-90deg);

	perspective: 200px;

	animation: flip 0.4s linear forwards;

}



@keyframes flip {

	0% {

		transform: perspective(200px) rotateY(-90deg);

	}

	100% {

		transform: perspective(200px) rotateY(0deg);

	}

}



.square[data-piece="wn"]::before {

	--piece-img: var(--p-wn);

}

.square[data-piece="bn"]::before {

	--piece-img: var(--p-bn);

}

.square[data-piece="wb"]::before {

	--piece-img: var(--p-wb);

}

.square[data-piece="bb"]::before {

	--piece-img: var(--p-bb);

}

.square[data-piece="wp"]::before {

	--piece-img: var(--p-wp);

}

.square[data-piece="bp"]::before {

	--piece-img: var(--p-bp);

}

.square[data-piece="wr"]::before {

	--piece-img: var(--p-wr);

}

.square[data-piece="br"]::before {

	--piece-img: var(--p-br);

}

.square[data-piece="wq"]::before {

	--piece-img: var(--p-wq);

}

.square[data-piece="bq"]::before {

	--piece-img: var(--p-bq);

}

.square[data-piece="wk"]::before {

	--piece-img: var(--p-wk);

}

.square[data-piece="bk"]::before {

	--piece-img: var(--p-bk);

}



.square[data-piece]::before {

	content: "";

	display: block;

	position: absolute;

	width: 100%;

	height: 100%;

	background-size: cover;

	pointer-events: none;

	background-image: var(--piece-img);

}



.white {

	background-color: #ffffff;

}



.black {

	background-color: #888;

}



.highlight {

	background-color: var(--highlight-color);

}

.black.highlight {

	background-color: var(--highlight-dark);
}



.selected-piece {

	border: 3px solid #000;

}



.gray-out {

	background-color: transparent;

	pointer-events: none;

	border: none;

	opacity: 0.4;

}



.target-square {

	box-shadow: inset 0 0 0 100px var(--target-color);

	border: 2px solid var(--target-border);

}



.square.drag-over {

	border: 2px dashed #000;

}



.promotion-options {

	position: absolute;

	left: 0;

	right: 0;

	margin: auto;

	width: fit-content;

	z-index: 101;

	background: #fff;

	border: 1px solid #000;

	padding: 12px;

	border-radius: 4px;

	display: flex;

	flex-direction: column;

	gap: 12px;

	box-shadow: 0 4px 24px 0 #000;

}

body:has(.promotion-options) :is(.square, .mid-header) {

	pointer-events: none;

}

.promotion-options button {

	display: flex;

	align-items: center;

	cursor: pointer;

	background: #fff;

	color: #000;

	border: 1px solid #0003;

	box-shadow: 0 2px 3px 0 #0003;

	transition: all 0.2s ease-in-out;

}

.promotion-options button::before {

	content: "";

	display: inline-block;

	width: 20px;

	height: 20px;

	margin: 2px 6px 2px 0px;

	--piece-img: var(--p-bq);

	background-image: var(--piece-img);

	background-repeat: no-repeat;

	background-size: cover;

}

.promotion-options button:nth-child(2):before {

	--piece-img: var(--p-bn);

}

.promotion-options button:hover {

	background: #0003;

	translate: 0 2px;

	box-shadow: 0 0px 1px 0 #0003;

}



/* Footer styles */

footer {

	position: fixed;

	bottom: 20px;

	width: 100%;

	padding: 8px 0;

	text-align: center;

	z-index: 150; /* Increased z-index to be above intro/info screens */

}



footer p {

	margin: 0;

	color: light-dark(var(--text-color-light), var(--text-color-dark));

	font-size: 14px;

}



footer a {

	color: #6563ff;

	text-decoration: none;

	transition: color 0.2s;

}



footer a:hover {

	color: #8b8aff;

	text-decoration: underline;

}



footer i.fa-heart {

	color: #ff6b6b;

}



/* Help modal styles */

.help-modal {

	position: fixed;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-color: rgba(0, 0, 0, 0.6);

	display: none;

	justify-content: center;

	align-items: center;

	z-index: 1000;

}



.help-modal.show {

	display: flex;

}



.help-modal-content {

	background: light-dark(var(--bg-light), var(--bg-dark));

	border-radius: 8px;

	max-width: 90%;

	width: 600px;

	max-height: 90vh;

	overflow-y: auto;

	position: relative;

	padding: 20px;

	color: light-dark(var(--bg-dark), var(--bg-light));

}



.help-close {

	position: absolute;

	top: 10px;

	right: 10px;

	cursor: pointer;

	width: 24px;

	height: 24px;

	display: flex;

	align-items: center;

	justify-content: center;

}



.help-close i {

	font-size: 20px;

}



.help-content {

	margin-top: 16px;

}



.rules-text {

	margin-bottom: 16px;

	text-align: left;

	white-space: pre-line;

}



.piece-descriptions {

	margin-top: 16px;

	text-align: left;

}



.piece-info {

	display: flex;

	align-items: center;

	margin-bottom: 12px;

}



.piece-icon {

	width: 40px;

	height: 40px;

	margin-right: 16px;

	background-size: contain;

	background-repeat: no-repeat;

	background-position: center;

}



.piece-icon[data-piece="bp"] {

	background-image: var(--p-bp);

}



.piece-icon[data-piece="br"] {

	background-image: var(--p-br);

}



.piece-icon[data-piece="bn"] {

	background-image: var(--p-bn);

}



.piece-icon[data-piece="bb"] {

	background-image: var(--p-bb);

}



.piece-icon[data-piece="bq"] {

	background-image: var(--p-bq);

}



.piece-icon[data-piece="bk"] {

	background-image: var(--p-bk);

}



.controls-section {

	margin-top: 16px;

	text-align: left;

}



.controls-section ul {

	margin-left: 20px;

	padding-left: 0;

}



.controls-section li {

	margin-bottom: 8px;

}



/* Debug mode styles */

.debug-indicator {

	position: absolute;

	top: 10px;

	left: 50%;

	transform: translateX(-50%);

	background: rgba(0, 0, 0, 0.6);

	color: #fff;

	padding: 6px 12px;

	border-radius: 4px;

	font-size: 14px;

	z-index: 10;

	display: none;

}



/* New debug visualization with numbers */

.square[data-debug-step]::after {

	content: attr(data-debug-step);

	position: absolute;

	top: 0;

	right: 0;

	background-color: #4CAF50;

	color: white;

	width: 20px;

	height: 20px;

	border-radius: 50%;

	display: flex;

	align-items: center;

	justify-content: center;

	font-size: 14px;

	font-weight: bold;

	z-index: 10;

}



/* Exit confirmation dialog */

.exit-confirmation {

	position: fixed;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background: rgba(0, 0, 0, 0.7);

	display: none;

	justify-content: center;

	align-items: center;

	z-index: 1000;

}



.exit-dialog {

	background: light-dark(var(--bg-light), var(--bg-dark));

	padding: 20px;

	border-radius: 8px;

	text-align: center;

	max-width: 90%;

	width: 300px;

	color: light-dark(var(--bg-dark), var(--bg-light));

}



.exit-buttons {

	display: flex;

	justify-content: center;

	gap: 16px;

	margin-top: 16px;

}



.exit-buttons .btn {

	min-width: 80px;

}



/* Prevent context menu */

body {

	-webkit-touch-callout: none;

	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-ms-user-select: none;

	user-select: none;

}



/* Hero chess piece in intro screen */

.hero-bg-pawn {

	position: absolute;

	width: 140px;

	height: 280px;

	filter: blur(0.5px);

	opacity: 0.7;

	z-index: -1;

	scale: 1.5;

	transition: all 0.2s ease-in-out;

}

.hero-bg-pawn > div {

	position: absolute;

	left: 0;

	right: 0;

	margin: auto;

	border-radius: 100%;

	--scale: 10px;

	box-shadow: inset calc(0.8 * var(--scale)) 0px calc(0.4 * var(--scale))

			calc(-0.4 * var(--scale)) #457c9b,

		inset calc(1.2 * var(--scale)) 0px calc(1.4 * var(--scale))

			calc(-0.4 * var(--scale)) #345c72,

		inset calc(-1.4 * var(--scale)) calc(-2 * var(--scale))

			calc(1.2 * var(--scale)) calc(-2 * var(--scale)) #fff5,

		inset calc(-1.4 * var(--scale)) var(--scale) calc(1.2 * var(--scale))

			calc(-0.8 * var(--scale)) #fff,

		inset calc(-1.4 * var(--scale)) var(--scale) calc(2 * var(--scale))

			calc(-0.6 * var(--scale)) #fff,

		inset 0px 0px 0px 100px #000;

}

.hero-bg-pawn > div:nth-child(1) {

	width: 74px;

	height: 74px;

	top: 6%;

}

.hero-bg-pawn > div:nth-child(5) {

	width: 54px;

	height: 12px;

	top: 30%;

	--scale: 3px;

}

.hero-bg-pawn > div:nth-child(6) {

	width: 64px;

	height: 20px;

	top: 33%;

	--scale: 4.5px;

	border-radius: 100% 100% 100% 100% / 80% 80% 80% 80%;

}

.hero-bg-pawn > div:nth-child(7) {

	width: 44px;

	height: 112px;

	top: 27%;

	--scale: 8px;

	transform-style: preserve-3d;

	transform: perspective(100px) rotateX(45deg);

	border-radius: 100% 100% 100% 100% / 20% 20% 10% 10%;

}

.hero-bg-pawn > div:nth-child(4) {

	width: 92px;

	height: 20px;

	top: 67%;

	--scale: 6px;

	border-radius: 100% 100% 100% 100% / 80% 80% 80% 80%;

}

.hero-bg-pawn > div:nth-child(3) {

	width: 90%;

	height: 64px;

	top: 70%;

	--scale: 10px;

	border-radius: 100% 100% 100% 100% / 200% 200% 70% 70%;

}

.hero-bg-pawn > div:nth-child(2) {

	width: 100%;

	height: 42px;

	top: 86%;

	--scale: 8px;

	border-radius: 100% 100% 100% 100% / 50% 50% 50% 50%;

}

.intro-screen:has(.intro-screen-btn.btn:hover) .hero-bg-pawn {

	filter: blur(10px);

	transform: perspective(200px) rotateX(4deg) scale(1.5);

}















/* Estilos para los botones de navegación en modo debug */

.debug-nav-btn {

    position: relative;

    background-color: rgba(0, 0, 0, 0.7);

    color: white;

    border: none;

    border-radius: 5px;

    padding: 10px 15px;

    margin: 0 5px;

    cursor: pointer;

    font-size: 16px;

    transition: all 0.3s ease;

}



.debug-nav-btn:hover {

    background-color: rgba(0, 0, 0, 0.9);

}



.debug-nav-btn:disabled {

    cursor: not-allowed;

    opacity: 0.5;

}



.debug-indicator {

    display: none; /* Oculto por defecto, se muestra solo en modo debug */

    position: fixed;

    bottom: 50px;

    left: 0;

    right: 0;

    justify-content: center;

    align-items: center;

    padding: 10px;

    z-index: 100;

}



.debug-message {

    margin: 0 10px;

    color: white;

    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);

}



/* Destacados para los movimientos en modo debug */

.square.debug-current {

    box-shadow: inset 0 0 0 4px rgba(255, 255, 0, 0.7);

}



.square.debug-highlight {

    box-shadow: inset 0 0 0 4px rgba(0, 255, 0, 0.7);

}



.square.debug-path {

    box-shadow: inset 0 0 0 4px rgba(100, 100, 255, 0.5);

}



.square.debug-visited {

    box-shadow: inset 0 0 0 4px rgba(255, 100, 100, 0.5);

}



/* Corrección de estilos para los botones en la ventana de nivel completado */

.lvl-clear-box .btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 16px;

    border-radius: 4px;

    background-color: #f0f0f0;

    color: #333;

    font-weight: bold;

    cursor: pointer;

    transition: all 0.3s ease;

    margin: 10px 5px;

    border: none;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

}



.lvl-clear-box .btn:hover {

    background-color: #e0e0e0;

    transform: translateY(-2px);

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}



.lvl-clear-box .btn-right {

    background-color: #4CAF50;

    color: white;

}



.lvl-clear-box .btn-right:hover {

    background-color: #45a049;

}



.lvl-clear-box .btn-rotate {

    background-color: #2196F3;

    color: white;

}



.lvl-clear-box .btn-rotate:hover {

    background-color: #0b7dda;

}



.lvl-clear-box .btn i {

    width: 20px;

    height: 20px;

    margin-left: 8px;

}



.lvl-clear-box .btn.btn-rotate i {

    transition: transform 0.3s ease;

}



.lvl-clear-box .btn.btn-rotate:hover i {

    transform: rotate(180deg);

}



/* Garantizar que el texto del botón sea visible */

.lvl-clear-box .btn .btn-text {

    display: inline-block;

    vertical-align: middle;

}









.countdown-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.7);

    color: white;

    display: none;

    align-items: center;

    justify-content: center;

    font-size: 8rem;

    font-weight: bold;

    z-index: 1000;

}



.pulse {

    animation: pulse-animation 0.3s ease-in-out;

}



@keyframes pulse-animation {

    0% { transform: scale(1); }

    50% { transform: scale(1.2); }

    100% { transform: scale(1); }

}





.countdown-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.7);

    color: white;

    display: none;

    align-items: center;

    justify-content: center;

    font-size: 8rem;

    font-weight: bold;

    z-index: 1000;

}



.pulse {

    animation: pulse-animation 0.3s ease-in-out;

}







.puzzle-screen {

   margin-top: -100px;

}









/* ============= FIXES PROPIOS ============= */





footer p {z-index: 10; width: 160px !important; margin: 0 auto !important;}

#track-skip-area {z-index: -5 !important;}

#level-clear {z-index: 500;}







/* Mensaje por css de solo vertical */



@media only screen and (max-width: 1024px) and (orientation: landscape) {

  /* Ocultar el contenido principal cuando está en horizontal */

  body > * {

    display: none !important;

  }

  

  /* Mantener el fondo visible */

  body {

    background-color: inherit; /* Mantiene el color de fondo actual */

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    margin: 0;

    padding: 0;

  }

  

  /* Mostrar el mensaje de solo vertical */

  body::after {

    content: "Por favor, gira tu dispositivo\A\A📱\A\A Please, rotate your device";

    white-space: pre;

    display: block;

    position: absolute;

    top: 40%;

    left: 50%;

    transform: translate(-50%, -50%);

    font-size: 24px;

    font-weight: bold;

    text-align: center;

    color: #fff; /* Color del texto */

    background-color: rgba(0, 0, 0, 0.8); /* Fondo semi-transparente */

    padding: 20px;

    border-radius: 10px;

    z-index: 9999;

    width: 80%;

  }

}





/* ==== CORRECCIONES PARA DISEÑO RESPONSIVO ==== */





/* Ajustes básicos para mejorar visualización en pantallas grandes */





/* Asegurar que el header esté en la posición correcta en todas las resoluciones */

header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    background: linear-gradient(196deg, #3b434a, #171a21);

    padding: 15px;

    z-index: 200;

}





/* Controles responsivos */

.mid-header {

    position: fixed;

    bottom: 80px;

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 10px;

    padding: 0 20px;

    background: none;

}







/* Adaptación del tablero para diferentes tamaños de pantalla */



@media screen and (min-width: 360px) {



    /* Móviles */



    

    /* Botones más grandes en pantallas grandes */

    .btn, select, input, button {

        font-size: 1em;

     margin-top: 0px;

    }



#moveCount {

        margin-top: 5px;

        margin-left: 20px;

        margin-right: 20px;

    }





    .mid-header {

        position: fixed;

        bottom: 60px;

    }





    .mid-header2 {

        display: flex;

        position: fixed;

        bottom: 120px;

    }



.mid-header #levelDropdown {margin-left: 44px; width: 140px;}

.mid-header #styleDropdown {width: 140px; text-alig: center;}

#moveCount {width: 100px;}



}







@media screen and (min-width: 720px) {



    /* Móviles2 */



    

    /* Botones más grandes en pantallas grandes */

    .btn, select, input, button {

        font-size: 1em;

     margin-top: 0px;

    }



#moveCount {

        margin-top: 5px;

        margin-left: 20px;

        margin-right: 20px;

    }





    .mid-header {

        position: fixed;

        bottom: 60px;

    }





    .mid-header2 {

        display: flex;

        position: fixed;

        bottom: 120px;

    }



.mid-header #levelDropdown {margin-left: 40px; width: 140px;}

.mid-header #styleDropdown {width: 140px; text-alig: center;}

#moveCount {width: 95px;}



}









@media screen and (min-width: 1024px) {



    /* Pantallas de escritorio */



    #chessboard {

        --size: min(min(6vw, 7vh), 70px);

    }

    

    body {

        padding-top: 100px;

    }

    

    .mid-header {

        position: fixed;

        bottom: 60px;

    }





    .mid-header2 {

        display: flex;

        position: fixed;

        bottom: 120px;

    }



.mid-header #levelDropdown {margin-left: 30px; width: 140px;}

.mid-header #styleDropdown {width: 140px; text-alig: center;}

#moveCount {width: 90px;}

.level-clear {top: 0;}







body {

    height: 100vh;

    overflow-y: auto !important; /* Permitir scroll vertical en pantallas grandes */

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    padding-top: 200px; /* Espacio para el header */

  }



}



/* Footer siempre en la posición correcta */

footer {

    position: fixed;

    bottom: 10px;

    left: 0;

    width: 100%;

    padding: 10px 0;

    z-index: 150;

}



/* Mejorar visualización de pantallas de introducción */

.intro-screen {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    z-index: 300;

    padding-bottom: 60px; /* Espacio para el footer */

}



.info-screen {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    z-index: 200;

    padding-bottom: 60px; /* Espacio para el footer */

}





/* Mejoras visuales para casillas destacadas */

.square.selected-piece {

    border: 3px solid #000 !important;

    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);

}



.target-square {

    box-shadow: inset 0 0 0 100px var(--target-color) !important;

    border: 2px solid var(--target-border) !important;

}



.highlight {

    background-color: var(--highlight-color) !important;

}



.black.highlight {

    background-color: var(--highlight-dark) !important;

}



/* Ajustes específicos para dispositivos de escritorio */

html.desktop-device .puzzle-screen {

    padding-top: 0;

}



html.desktop-device #chessboard {

    margin-top: 0;

}



/* Añadir clase para detectar dispositivo */

@media (pointer: fine) {

    html {

        class: "desktop-device";

    }

}





/* Solo añadir estas líneas al final de tu CSS existente */





/* Asegurar que header y footer estén siempre visibles */

footer, header {

    z-index: 400;

}



/* Estilos básicos para el scoreboard */
#scoreboard-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

#scoreboard-container.show {
    display: block;
}

.scoreboard-modal {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scoreboard-content {
    background-color: #222;
    max-width: 90%;
    width: 420px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

#scoreboard-header {
    position: relative;
    background-color: #111;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

#scoreboard-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

#close-score {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 24px;
    line-height: 24px;
    cursor: pointer;
    color: #fff;
}

#scoreboard-tabs {
    display: flex;
    background-color: #333;
    flex-wrap: wrap;
    justify-content: center;
    padding: 5px 0;
}

.scoreboard-tab {
    background-color: transparent;
    border: none;
    color: #fff;
    padding: 5px 0;
    margin: 2px;
    cursor: pointer;
    font-size: 14px;
    min-width: 30px;
    flex: 0 0 auto;
}

.scoreboard-tab.active {
    background-color: #444;
    font-weight: bold;
}

#scoreboard-pages {
    position: relative;
}

.scoreboard-page {
    display: none;
    padding: 4px;
}

.scoreboard-page.active {
    display: block;
}

.scoreboard-table {
    width: 100%;
    border-collapse: collapse;
}

.scoreboard-table td {
    padding: 2px;
    vertical-align: top;
    width: 25%;
}

.level-label {
    background-color: #444;
    color: #fff;
    text-align: center;
    padding: 4px 0;
    font-size: 13px;
    border-radius: 3px 3px 0 0;
}

.level-score {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 4px 0;
    font-size: 14px;
    font-weight: bold;
    border-radius: 0 0 3px 3px;
}

/* Tema claro */
[data-theme="light"] .scoreboard-content {
    background-color: #f5f5f5;
}

[data-theme="light"] #scoreboard-header {
    background-color: #e0e0e0;
    color: #333;
}

[data-theme="light"] #close-score {
    color: #333;
}

[data-theme="light"] #scoreboard-tabs {
    background-color: #ddd;
}

[data-theme="light"] .scoreboard-tab {
    color: #333;
}

[data-theme="light"] .scoreboard-tab.active {
    background-color: #ccc;
}

[data-theme="light"] .level-label {
    background-color: #ccc;
    color: #333;
}

[data-theme="light"] .level-score {
    background-color: #e0e0e0;
    color: #333;
}

/* Ajustes para móviles */
@media only screen and (max-width: 480px) {
    .scoreboard-content {
        width: 95%;
    }
    
    #scoreboard-header h2 {
        font-size: 1.3rem;
    }
    
    .level-label, .level-score {
        font-size: 12px;
        padding: 3px 0;
    }
}

/* Ajustes para pantallas muy pequeñas */
@media only screen and (max-width: 360px) {
    .level-label, .level-score {
        font-size: 11px;
        padding: 2px 0;
    }
}