/* Outfit font */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap");
/* variables */
:root {
	--yellow-main: #f2b137;
	--yellow-hl: #ffc860;
	--blue-main: #31c3bd;
	--blue-hl: #65e9e4;
	--navy-main: #1a2a33;
	--navy-hl: #1f3641;
	--slate-main: #a8bfc9;
	--slate-hl: #dbe8ed;
}
html {
    background-color: var(--navy-main);
}

body {
	margin: 0;
	font-family: "outfit";
	color: var(--slate-main);
	font-weight: 700;
}

button {
	border: none;
	padding: 0;
	font-family: "outfit";
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 1.25px;
	color: var(--navy-main);
	text-align: center;
	cursor: pointer;
	transition: all 0.4s;
}

/* Resuable Styling */
.main-btn {
	height: 51px;
	border-radius: 15px;
}
.main-btn.clicking {
    transform: translateY(6px);
}
.secondary-btn {
	padding: 15px 0;
	border-radius: 10px;
}
.secondary-btn.clicking {
    transform: translateY(3px);
}

.btn-1 {
	background-color: var(--yellow-main);
	box-shadow: 0px 8px 0px 0px #cc8b13;
}
.btn-1:hover {
	background-color: var(--yellow-hl);
}
.btn-1.clicking {
    box-shadow: 0 2px 0 0 #cc8b13;

}
.btn-2 {
	background-color: var(--blue-main);
	box-shadow: 0px 8px 0px 0px #118c87;
}
.btn-2:hover {
	background-color: var(--blue-hl);
}
.btn-2.clicking {
    box-shadow: 0 2px 0 0 #118c87;
}
.secondary-btn-1 {
	background-color: var(--yellow-main);
	box-shadow: 0px 4px 0px 0px #cc8b13;
}
.secondary-btn-1:hover {
	background-color: var(--yellow-hl);
}
.secondary-btn-1.clicking {
    box-shadow: 0 1px 0 0 #cc8b13;
}
.secondary-btn-2 {
	background-color: var(--slate-main);
	box-shadow: 0px 4px 0px 0px #6b8997;
}
.secondary-btn-2:hover {
	background-color: var(--slate-hl);
}
.secondary-btn-2.clicking {
    box-shadow: 0 1px 0 0 #6b8997
}

.heading-l {
	font-size: 40px;
	letter-spacing: 2.5px;
}
.heading-m {
	font-size: 24px;
	letter-spacing: 1.5px;
}
.heading-s {
	font-size: 20px;
	letter-spacing: 1.25px;
}
.heading-xs {
	font-size: 16px;
	letter-spacing: 1px;
}
p,
.body {
	font-size: 14px;
	letter-spacing: 0.875px;
	font-weight: 500;
	margin: 0;
}
main {
	width: 100vw;
	height: 100vh;
	background-color: var(--navy-main);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
@media (max-width: 500px) {
	button {
		font-size: 16px;
		letter-spacing: 1px;
	}
	.main-btn {
		height: 48px;
	}
	.secondary-btn {
		height: 48px;
	}
	.heading-l {
		font-size: 24px;
		letter-spacing: 1.5px;
	}
	.heading-m {
		font-size: 20px;
		letter-spacing: 1.25px;
	}
	.heading-s {
		font-size: 16px;
		letter-spacing: 1px;
	}
	.heading-xs {
		font-size: 14px;
		letter-spacing: 0.875px;
	}
}

/* Setup Page */
#setup {
	transition: all 2s linear;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 40px;
	width: 460px;
	margin: 0 auto;
}
.icon-select {
	padding: 24px 24px 30px 24px;
	width: calc(100% - 48px);
	border-radius: 15px;
	background-color: var(--navy-hl);
	text-align: center;
	box-shadow: 0px -8px 0px 0px #10212a inset;
}
.icon-select .heading-xs {
	padding-bottom: 24px;
}
.icon-select p {
	padding-top: 17px;
	opacity: 50%;
}
.selector {
	display: flex;
	border-radius: 10px;
	background-color: var(--navy-main);
	padding: 9px 8px;
	position: relative;
	width: calc(100% - 16px);
	height: 54px;
}
.selector label {
	width: 100%;
	text-align: center;
	padding: 11px;
	z-index: 2;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}
.selector input:checked + label svg {
	color: var(--navy-main);
	transition: all 0.3s ease-in-out;
}
.selector input:not(:checked) + label:hover {
	border-radius: 10px;
	background: rgba(168, 191, 201, 0.05);
}
.selector label svg {
	color: var(--slate-main);
	width: 31.741px;
	height: 31.741px;
}
#selector-x,
#selector-o {
	display: none;
}
.selector #selected-bg {
	content: "";
	position: absolute;
	width: calc(50% - 8px);
	height: calc(100% - 22px);
	border-radius: 10px;
	background-color: var(--slate-main);
	transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}
.selector input:first-of-type:checked ~ #selected-bg {
	transform: translateX(0);
}
.selector input:last-of-type:checked ~ #selected-bg {
	transform: translateX(100%);
}
.player-number-buttons button {
	width: 100%;
}
#two-players-start {
	margin-top: 20px;
}
@media (max-width: 500px) {
	#setup {
		max-width: 327px;
		gap: 32px;
	}
}

/* Active page */
#active {
	width: 460px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
#active header {
	display: flex;
	align-items: center;
	justify-content: space-between;
    transition-property: opacity, transform;
    transition-delay: .5s, 0;
    transition-timing-function: ease-out, ease;
    transition-duration: 1s;
}
#restart-btn {
	width: 52px;
	height: 48px;
	border-radius: 10px;
	background-color: var(--slate-main);
	box-shadow: 0px 4px 0px 0px #6b8997;
}
#restart-btn svg {
    vertical-align: middle;
}
#restart-btn:hover {
	background-color: var(--slate-hl);
}
#restart-btn.clicking {
	box-shadow: 0px 1px 0px 0px #6b8997;
    transform: translateY(3px);
}
.turn {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: center;
	padding: 13px 30px 19px 30px;
	background-color: var(--navy-hl);
	border-radius: 10px;
	box-shadow: 0px -4px 0px #10212a inset;
}
.cell {
	width: 138px;
	height: 132px;
	background-color: var(--navy-hl);
	border-radius: 15px;
	box-shadow: 0px 8px 0px 0px #10212a;
	display: flex;
	align-items: center;
	justify-content: center;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
    transition: all 0.2s linear;
}
.cell.clicking {
    box-shadow: 0 2px 0 0 #10212a;
    transform: translateY(6px);
}
.cell img {
    transition: all 2s ease-in;
}
tbody {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
    transition-property: opacity, transform;
    transition-delay: .5s, 0;
    transition-timing-function: ease-out, ease;
    transition-duration: 1s;
}
tr {
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: center;
}
.scores {
	display: flex;
	align-items: center;
	justify-content: space-between;
    transition-property: opacity, transform;
    transition-delay: .5s, 0;
    transition-timing-function: ease-out, ease;
    transition-duration: 1s;
}
.scores > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 15px;
	width: 140px;
	height: 72px;
	color: var(--navy-main);
}
.x-score {
	background-color: var(--blue-main);
}
.ties {
	background-color: var(--slate-main);
}
.o-score {
	background-color: var(--yellow-main);
}
@media (max-width: 500px) {
	#active {
		width: 327px;
	}
	.cell {
		width: 94px;
		height: 88px;
		background-size: 40px;
	}
	.cell img {
		width: 40px;
		height: 40px;
	}
	.scores > div {
		width: 96px;
		height: 64px;
	}
}

/* Restart section and next round section */
#restart,
#next-round {
	position: absolute;
	width: 100%;
	text-align: center;
}
#restart::before,
#next-round::before {
	content: "";
	display: block;
	background-color: #000;
	opacity: 0.5;
	position: fixed;
	top: 0;
	left: 0;
    height: 100vh;
    width: 100vw;
    animation: fadeHalf 1s linear;
    transition: opacity 0.5s linear;
}
.restart-content, .next-round-content {
    animation: scaleEnter 0.6s linear;
    transition: scale 0.5s linear;
}
.restart-content,
.next-round-content {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 31px;
	z-index: 2;
	background-color: var(--navy-hl);
	padding: 66px 0;
}
.restart-btns,
.next-round-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}
#round-result {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 24px;
}

/* Buttons */
#cancel-restart-btn {
	padding-left: 18px;
	padding-right: 16px;
}
#confirm-restart-btn {
	padding-left: 15.5px;
	padding-right: 17.5px;
}
#quit,
#confirm-next-round {
	padding-left: 17px;
	padding-right: 16px;
}

@media (max-width: 500px) {
	.next-round-content {
		padding: 40px 0 48px 0;
		gap: 16px;
	}
	#round-result {
		gap: 8px;
		margin-bottom: 8px;
	}
	#round-result img {
		width: 30px;
		height: 30px;
	}
	.restart-content {
		padding: 61px 0;
		gap: 24px;
	}
}


/* Animations */
#setup header {
    animation: fadeDelayEighty 1.5s ease-out;
    transition: opacity 0.3s ease-out;
}
#setup .icon-select {
    animation: translateDown 1s ease, fadeDelayTwenty 1s ease-out;
    transition-property: opacity, transform;
    transition-delay: .5s, 0;
    transition-timing-function: ease-out, ease;
    transition-duration: 1s;
}
#setup #one-player-start {
    animation: translateRight 1s ease, fadeDelayTwenty 1s ease-out;
    transition-property: opacity, transform;
    transition-delay: .5s, 0;
    transition-timing-function: ease-out, ease;
    transition-duration: 1s;
}
#setup #two-players-start {
    animation: translateLeft 1s ease, fadeDelayTwenty 1s ease-out;
    transition-property: opacity, transform;
    transition-delay: .5s, 0;
    transition-timing-function: ease-out, ease;
    transition-duration: 1s;
}
#setup.exit header {
    opacity: 0;
}
#setup.exit .icon-select {
    opacity: 0;
    transform: translateY(-200px);
}
#setup.exit #one-player-start {
    opacity: 0;
    transform: translateX(-200px);
}
#setup.exit #two-players-start {
    opacity: 0;
    transform: translateX(200px);
}


#active header {
    animation: translateDown 1s ease, fadeDelayTwenty 1s ease-out;
}
#active .scores {
    animation: translateUp 1s ease, fadeDelayTwenty 1s ease-out;
}
#active tbody {
    animation: translateRight 1s ease, fadeDelayTwenty 1s ease-out;
}
#active.exit tbody {
    opacity: 0;
    transform: translateX(-200px);
}
#active.exit .scores {
    opacity: 0;
    transform: translateY(200px);
}
#active.exit header {
    opacity: 0;
    transform: translateY(-200px);
}
#restart.exit .restart-content, #next-round.exit .next-round-content {
    scale: 0;
}
#restart.exit::before, #next-round.exit::before {
    opacity: 0;
}
.cell img {
    animation: scaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: 0.5s ease-out;
}
#turn-x-icon, #turn-o-icon {
    animation: scaleIn 0.2s ease;
}
#active.next-round .cell img {
    scale: 0;
}
/* Keyframes */
@keyframes translateDown {
    from {transform: translateY(-200px);}
    to {transform: translateY(0px);}
}
@keyframes translateUp {
    from {transform: translateY(200px);}
    to {transform: translateY(0px);}
}
@keyframes translateRight {
    from {transform: translateX(-200px);}
    to {transform: translateX(0px);}
}
@keyframes translateLeft {
    from {transform: translateX(200px);}
    to {transform: translateX(0px);}
}
@keyframes fadeDelayTwenty {
    0% {opacity: 0;}
    20% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fadeDelayEighty {
    0% {opacity: 0;}
    80% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes scaleIn {
    from {scale: 0;}
    to {scale: 1;}
}
@keyframes scaleEnter {
    from {scale: 0;}
    to {scale: 100%;}

}
@keyframes fadeHalf {
    from {opacity: 0;}
    to {opacity: 0.5}
}
@-moz-keyframes translateDown {
    from {transform: translateY(-200px);}
    to {transform: translateY(0px);}
}
@-moz-keyframes translateUp {
    from {transform: translateY(200px);}
    to {transform: translateY(0px);}
}
@-moz-keyframes translateRight {
    from {transform: translateX(-200px);}
    to {transform: translateX(0px);}
}
@-moz-keyframes translateLeft {
    from {transform: translateX(200px);}
    to {transform: translateX(0px);}
}
@-moz-keyframes fadeDelayTwenty {
    0% {opacity: 0;}
    20% {opacity: 0;}
    100% {opacity: 1;}
}
@-moz-keyframes fadeDelayEighty {
    0% {opacity: 0;}
    80% {opacity: 0;}
    100% {opacity: 1;}
}
@-moz-keyframes scaleIn {
    from {scale: 0;}
    to {scale: 1;}
}
@-moz-keyframes scaleEnter {
    from {scale: 0;}
    to {scale: 100%;}

}
@-moz-keyframes fadeHalf {
    from {opacity: 0;}
    to {opacity: 0.5}
}
@-o-keyframes translateDown {
    from {transform: translateY(-200px);}
    to {transform: translateY(0px);}
}
@-o-keyframes translateUp {
    from {transform: translateY(200px);}
    to {transform: translateY(0px);}
}
@-o-keyframes translateRight {
    from {transform: translateX(-200px);}
    to {transform: translateX(0px);}
}
@-o-keyframes translateLeft {
    from {transform: translateX(200px);}
    to {transform: translateX(0px);}
}
@-o-keyframes fadeDelayTwenty {
    0% {opacity: 0;}
    20% {opacity: 0;}
    100% {opacity: 1;}
}
@-o-keyframes fadeDelayEighty {
    0% {opacity: 0;}
    80% {opacity: 0;}
    100% {opacity: 1;}
}
@-o-keyframes scaleIn {
    from {scale: 0;}
    to {scale: 1;}
}
@-o-keyframes scaleEnter {
    from {scale: 0;}
    to {scale: 100%;}

}
@-o-keyframes fadeHalf {
    from {opacity: 0;}
    to {opacity: 0.5}
}
@-webkit-keyframes translateDown {
    from {transform: translateY(-200px);}
    to {transform: translateY(0px);}
}
@-webkit-keyframes translateUp {
    from {transform: translateY(200px);}
    to {transform: translateY(0px);}
}
@-webkit-keyframes translateRight {
    from {transform: translateX(-200px);}
    to {transform: translateX(0px);}
}
@-webkit-keyframes translateLeft {
    from {transform: translateX(200px);}
    to {transform: translateX(0px);}
}
@-webkit-keyframes fadeDelayTwenty {
    0% {opacity: 0;}
    20% {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes fadeDelayEighty {
    0% {opacity: 0;}
    80% {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes scaleIn {
    from {scale: 0;}
    to {scale: 1;}
}
@-webkit-keyframes scaleEnter {
    from {scale: 0;}
    to {scale: 100%;}

}
@-webkit-keyframes fadeHalf {
    from {opacity: 0;}
    to {opacity: 0.5}
}