/** @format */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	--bg: #fffcf2;
	--primary-color: #252422;
	--primary-shadow: #1a1917b3;
	--secondary-color: #403d39;
	--light-color: #ccc5b9;
	--light-secondary-color: #eeebe1;
	--tictactoe-color: #eb5e28;
	--font-page: "Play", sans-serif;
	--font-board: "Oooh Baby", cursive;
	background-color: var(--bg);
	transition: background-color 250ms ease-out;
}

body[data-theme="dark"] {
	--bg: #252422;
	--primary-color: #fffcf2;
	--secondary-color: #ccc5b9;
	--light-color: #403d39;
	--light-secondary-color: #363431;
	--tictactoe-color: #eb5e28;
	--font-page: "Play", sans-serif;
	--font-board: "Oooh Baby", cursive;
}

.container {
	display: flex;
	justify-content: center;
}

.container.theme {
	margin: 10px;
}

.container.theme i {
	font-size: 20px;
	color: var(--primary-color);
	cursor: pointer;
	text-shadow: 2px 2px 2px var(--primary-shadow);
	transition: color 250ms ease-out, transform 150ms ease-in, rotate 500ms ease;
}

.container.theme i:hover {
	transform: scale(1.1);
	rotate: 360deg;
}

body[data-theme="dark"] .container.theme i:hover {
	rotate: -360deg;
}

.player-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 20px 0 40px;
	font-family: var(--font-page);
	font-weight: 400;
	text-align: center;
}

.game-state {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	gap: 15px;
	transition: gap 300ms ease-out;
}

.game-state p {
	font-size: 24px;
}

.game-state .fading-arrows {
	animation-name: fadingAnimation;
	animation-duration: 1300ms;
	animation-fill-mode: backwards;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes fadingAnimation {
	from {
		opacity: 100%;
	}
	to {
		opacity: 0;
	}
}

.game-state .versus {
	margin: 0 10px 0;
	font-size: 35px;
	font-family: var(--font-board);
	color: var(--tictactoe-color);
	transition: font-size 150ms ease-out;
}

.player-container {
	padding: 0;
	border: 0 solid rgba(0, 0, 0, 0);
	background-color: rgba(0, 0, 0, 0);
	border-radius: 5px;
	transition: border 180ms ease-out, background-color 150ms ease-in, padding 450ms ease-out;
}

.player-container span {
	font-size: 32px;
	padding: 3px 1px;
	color: var(--primary-color);
	border-bottom: 2px solid rgba(0, 0, 0, 0);
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	transition: border-bottom 400ms ease, font-size 150ms ease-out, color 250ms ease-out;
}

.input-indicator span {
	color: var(--secondary-color) !important;
}

.game-state .versus,
.player-container span {
	font-weight: 700;
}

.input-indicator {
	padding: 6px 10px;
	border-bottom: 2px solid var(--secondary-color);
	background: -webkit-linear-gradient(top, var(--bg), var(--light-secondary-color));
	background: -moz-linear-gradient(top, var(--bg), var(--light-secondary-color));
	background: linear-gradient(to bottom, var(--bg), var(--light-secondary-color));
}

.animate-text-editable {
	animation-name: blinking-cursor;
	animation-duration: 450ms;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-out;
}

.input-indicator span:focus-visible {
	animation-name: none;
	outline: none;
}

@keyframes blinking-cursor {
	from {
		border-right: 1px solid rgba(0, 0, 0, 0);
	}

	to {
		border-right: 1px solid var(--tictactoe-color);
	}
}

.turn-indicator {
	border-bottom: 2px solid var(--tictactoe-color) !important;
}

.player-container i {
	font-size: 0;
	transition: font-size 250ms ease-out, margin-left 250ms ease-out, margin-right 250ms ease-out;
}

.switch-mode {
	display: inline-block;
	font-size: 28px !important;
	cursor: pointer;
	color: var(--secondary-color);
	vertical-align: text-bottom;
	transition: transform 100ms ease-in, color 65ms ease-in;
}

.switch-mode:nth-child(1) {
	margin-right: 10px;
}

.switch-mode:nth-child(3) {
	margin-left: 10px;
}

.switch-mode:hover {
	color: var(--primary-color);
}

.switch-mode:nth-child(1):hover {
	transform: translateX(-2px);
}

.switch-mode:nth-child(3):hover {
	transform: translateX(2px);
}

.switch-mode:active {
	color: var(--tictactoe-color);
}

.game-state.results {
	margin-top: 25px;
}

.results i {
	color: var(--primary-color);
}

.results {
	font-size: 26px;
	transition: font-size 250ms ease-out;
}

.results-none {
	font-size: 0;
}

.game-result.win {
	color: green;
}

.game-result.lose {
	color: red;
}

.game-result.draw {
	color: var(--tictactoe-color);
}

.game-board {
	/* max-width: 40vw;
	min-width: 30vw;
	max-width: 40vh;
	min-height: 30vh; */
	margin: 20px;
	display: flex;
	flex-wrap: wrap;
	cursor: pointer;
	box-shadow: 11px 13px 21px 1px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 11px 13px 21px 1px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 11px 13px 21px 1px rgba(0, 0, 0, 0.3);
	transition: margin 300ms ease-out, box-shadow 300ms ease-out;
}

.game-board.disabled {
	box-shadow: 7px 7px 8px 0px var(--primary-shadow), -2px -2px 5px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 7px 7px 8px 0px var(--primary-shadow), -2px -2px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 7px 7px 8px 0px var(--primary-shadow), -2px -2px 5px rgba(0, 0, 0, 0.1);
}

.game-box {
	width: 1.3em;
	height: 3em;
	/* min-width: 50px;
	min-height: 100px; */
	flex: 0 0 33.333333%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: var(--font-board);
	font-size: 40px;
	color: var(--tictactoe-color);
	text-transform: uppercase;
	text-shadow: 1px 1px 5px var(--primary-color);

	border-bottom: 1px solid var(--secondary-color);
	border-right: 1px solid var(--secondary-color);
	transition: background-color 100ms ease-in, border-color 250ms ease-out;
}

.disabled .game-box {
	border-color: var(--light-color);
}

.game-box:hover {
	background-color: var(--light-secondary-color);
}

.disabled .game-box:hover {
	background-color: var(--bg);
}

.game-box:nth-child(7),
.game-box:nth-child(8),
.game-box:nth-child(9) {
	border-bottom: none;
}

.game-box:nth-child(3),
.game-box:nth-child(6),
.game-box:nth-child(9) {
	border-right: none;
}

.winner-animation {
	animation-name: winner-anim;
	animation-duration: 600ms;
	animation-fill-mode: backwards;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}

@keyframes winner-anim {
	from {
		text-shadow: 1px 1px 5px var(--primary-color);
	}
	to {
		text-shadow: 2px 2px 2px var(--tictactoe-color), 4px 4px 5px var(--tictactoe-color),
			6px 6px 8px var(--tictactoe-color);
	}
}

.btn {
	position: absolute;
	padding: 10px 15px;
	margin-top: 40px;
	max-width: fit-content;
	border: 1px solid var(--secondary-color);
	color: var(--primary-color);
	background-color: var(--light-secondary-color);
	font-family: var(--font-page);
	cursor: pointer;
	transition: color 100ms ease-in, background-color 100ms ease-in, translate 150ms ease, transform 300ms ease-in-out;
}

.btn:hover {
	background-color: var(--secondary-color);
	color: var(--bg);
	translate: 0 -3px;
}

.btn:active {
	background-color: var(--primary-color);
	color: var(--bg);
	translate: 0 1px;
}

.btn-disappear {
	transform: scale(0);
}

/* Visibility */
.d-none {
	display: none !important;
}

/* Disable Selection */
.disable-select {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Disabled */
.disabled {
	cursor: not-allowed;
}

/* Responsive */
@media screen and (max-width: 440px) {
	.container.theme {
		margin: 2px;
		margin-bottom: -10px;
	}

	.container.theme i {
		font-size: 16px;
	}

	.game-state {
		flex-direction: column;
		gap: 3px;
	}

	.game-board {
		margin: 5px;
		margin-top: -28px;
	}

	.game-state .versus,
	.player-container span {
		font-size: 24px;
	}

	.game-state .versus {
		margin-top: 8px;
	}

	.switch-mode {
		font-size: 20px;
	}
}