/* CSS custom property pro animaci úhlu */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* animations */
@keyframes spin {
  to {
    --angle: 360deg;
  }
}

/* m-plus-1-code-300 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'M PLUS 1 Code';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/m-plus-1-code-v17-latin_latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* m-plus-1-code-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'M PLUS 1 Code';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/m-plus-1-code-v17-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* indie-flower-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Indie Flower';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/indie-flower-v24-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* layers */

@layer base, base.desktop-sizing, base.mobile-sizing, components;


/* selectors */

@layer base {

	body {
		position: relative;
		display: flex;
		flex-direction: column;
		margin: 0px; /* cause of right computing size of the table and cards */
		font-family: 'Indie Flower';
		font-weight: 400;

		& header {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;

			& h1 {
				font-size: larger;
				margin: 0px;
				color: white;
			}

			& .rules-but {
				position: absolute;
				display: flex;
				align-items: center;
				right: 15px;
				top: 50%;
				transform: translateY(-50%);
				color: blueviolet;
				cursor: pointer;
			}
		}

		& main {
			display: flex;

			& section.control-panel {
				display: flex;
				justify-content: center;
				align-items: center;

				& div {
					display: flex;
				}

				& div.reveal {
					padding: 4px 7px;
					border: 2px solid purple;
					border-radius: 1px;
					background-color: rgba(0, 0, 0, 0.4);
					color: plum;
					transition: transform 0.2s linear, opacity 0.2s linear;
				}

				& div.reskip {
					padding: 2px 4px;
					border: 2px solid plum;
					border-radius: 50%;
					background-color: white;
					color: purple;
					transition: transform 0.2s linear, opacity 0.2s linear;
				}
			}

			& section.js-table {
				display: grid;
				border-radius: 4px;
				transition: background-color 0.6s ease-out;

				& .js-card {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-shrink: 0;
					border-radius: 4px;
					border-color: black !important;
					font-family: initial;
					font-weight: initial;
					
					transition: transform .25s, opacity 2.5s;
				}

				& .js-card.flipping {
					transform: scaleX(0);
				}
			}

			& section.js-table.hover-white{
				background-color: rgba(255, 255, 255, 0.1);
			}

			& section.js-table.hover-purple{
				background-color: rgba(128, 0, 128, 0.1);
			}

			& section.js-table.hover-forest{
				background-color: rgba(134, 239, 173, 0.1);
			}

			& section.js-table.hover-cloud{
				background-color: rgba(20, 40, 100, 0.3);
			}

		}

		& summary {
			height: 45px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: clamp(10px, 1vw, 15px);
			box-sizing: border-box;
			padding: 10px 10px;
			padding-bottom: 0px;
			color: white;
		}

		& footer.score {

			display: flex;

			& > div {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-family: 'M PLUS 1 Code'; /* for number values, cause of dynamic writing, indi flower isn't monospace */
				font-weight: 700;
			}

			& .js-player {
				color: rgb(255, 0, 255);

				& #name {
					font-family: 'Indie Flower';
					font-weight: 400;
					text-decoration: underline;
				}

				& > div {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					margin-top: 5px;
					gap: 0px 10px;

					& span::before {
						font-family: 'Indie Flower';
						font-weight: 400;
					}

					& #points::before {
						content: 'Points: ';
					}

					& #skip::before {
						content: 'Skips: ';
					}

					& #actual-skip::before {
						content: 'Actual skip: ';
					}

					& #counter::before {
						content: 'Cards counter: ';
					}
				}
			}

			& .time {
				color: pink;

				& span::before {
					font-family: 'Indie Flower';
					font-weight: 400;
				}
				
				& #game-time::before {
					content: 'Game time: ';
				}

				& #turn-time::before {
					content: 'Turn time: ';
				}
			}

			& .players-queue {
				color: violet;
				font-family: 'Indie Flower';
				font-weight: 400;

				& .player-II::before {
					content: 'Player II: ';
				}

				& .player-III::before {
					content: 'Player III: ';
				}
			}
		}

		& .rules-box {
			position: absolute;
			top: 50%; left: 50%;
			transform: translate(-50%, -50%);
			transition: opacity 0.6s ease-out;

			display: flex;
			z-index: 10;

			font-family: 'M PLUS 1 Code';
			font-weight: 300;
			font-size: 0.8rem;

			box-sizing: border-box;
			padding: 0px 10px;
			border-radius: 8px;
			border: 4px solid transparent;

			background:
				linear-gradient(rgb(255, 255, 255)) padding-box,
				conic-gradient(
					from var(--angle),
					transparent 0deg,
					transparent 120deg,
					purple 240deg,
					transparent 360deg
				) border-box;
			animation: spin 5s linear infinite;

			& .rules-lang {
				position: absolute;
				right: 4px;
				top: 4px;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 1.5rem;
				width: 1.5rem;
				border: 2px solid rgb(135, 63, 206);
				border-radius: 50%;
				background-color: black;
				color: rgb(135, 63, 206);
				cursor: pointer;
			}

			& .rules-main {
				overflow: scroll;

				& ul {
					list-style-position: outside;
					padding-left: 15px;
				}

				& ol {
					list-style-position: outside;
					padding-left: 15px;
				}
			}

			/* Hide scrollbar for Chrome, Safari and Opera */
			& .rules-main::-webkit-scrollbar {
				display: none;
			}

			/* Hide scrollbar for IE, Edge and Firefox */
			& .rules-main {
				-ms-overflow-style: none;  /* IE and Edge */
				scrollbar-width: none;  /* Firefox */
			}
		}

		& .rules-box.hidden {
			opacity: 0;
		}

		& .rules-box.hidden.none {
			visibility: hidden;
		}
	}

	body::before {
		content: "";
		position: fixed;
		inset: 0;
		background: url('./svg/background-wallpaper.svg') center/cover no-repeat;
		z-index: -1;
	}
}

@media (max-width: 350px){
	@layer base {
		body {
			& .rules-box {
				& .rules-main{
					font-size: 0.5rem;
				}

				& .rules-lang {
					font-size: 0.6rem;
					height: 1.1rem;
					width: 1.1rem;
				}
			}
		}
	}
}

@media (hover: hover) and (pointer: fine) {
	@layer base {
		body {
			& main {

				& section.control-panel {

					& div.reveal:hover {
						transform: scale(0.9);
						opacity: 0.5;
					}

					& div.reskip:hover {
						transform: scale(1.2);
						opacity: 0.5;
					}
				}
			}
		}
	}
}

/* @media (hover: none), (pointer: coarse) {
	@layer base {
		body {
			& main {
			}
		}
	}
} */

@layer base.desktop-sizing {
	
	body.desktop {

		& main {

			& section.js-table {
				
				& .js-card {
					color: black;
				}
			}

			& section.control-panel {
				flex-direction: column;
				width: 150px;
				gap: 100px 0px;

				& button {
					margin: 0px 20px;

				}
			}
		}
	}
}

@layer base.mobile-sizing {
	
	body.mobile {

		& main {

			& section.js-table {
				
				& .js-card {
					color: black;
				}
			}

			& section.control-panel {
				flex-direction: row;
				width: 100%;
				gap: 0px 100px;
			}

			& button {
				margin: 0px 20px;

			}
		}
	}
}