@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&display=swap');

:root {
	--white: hsl(0, 0%, 100%);
	--scissors1: hsl(39, 89%, 49%);
	--scissors2: hsl(40, 84%, 53%);
	--scissors3: hsl(39, 89%, 35%);
	--paper1: hsl(230, 89%, 62%);
	--paper2: hsl(230, 89%, 65%);
	--paper3: hsl(230, 89%, 45%);
	--rock1: hsl(349, 71%, 52%);
	--rock2: hsl(349, 70%, 56%);
	--rock3: hsl(349, 70%, 35%);
	--lizard1: hsl(261, 73%, 60%);
	--lizard2: hsl(261, 72%, 63%);
	--lizard3: hsl(261, 72%, 50%);
	--cyan1: hsl(189, 59%, 53%);
	--cyan2: hsl(189, 58%, 57%);
	--cyan3: hsl(189, 58%, 45%);
	--darktext: hsl(229, 25%, 31%);
	--scoretext: hsl(229, 64%, 46%);
	--headeroutline: hsl(217, 16%, 45%);
	--background1: hsl(214, 47%, 23%);
	--background2: hsl(237, 49%, 15%);
	--insetboxshadow: hsla(217, 16%, 45%, 0.3)
}

* {
	box-sizing: border-box;
}

body {
	background-color: var(--background1);
	font-family: 'Barlow Semi Condensed', 'sans-serif';
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	overflow-x: hidden;
	margin: 0;
	padding: 0 1.5rem;
	position: relative;
}

.container {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0;
	margin: 2rem 0 0 0;
}

/* Page Header */
#header {
	z-index: 10;
	padding: 1.1rem;
	border: 3px solid var(--headeroutline);
	border-radius: 15px;
	height: fit-content;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 650px;
	height: 150px;
}

#header .img-box {
	padding: 0.4rem;
}

#header img {
	padding: 0;
	margin: 0;
	margin-bottom: -0.4rem;
}

#header .score-box {
	background-color: var(--white);
	padding: 1rem 3rem;
	border-radius: 9px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#header h1, h2 {
	padding: 0;
	margin: 0;
}

#header h1 {
	color: var(--scoretext);
	font-size: 0.9rem;
	text-align: center;
	letter-spacing: 0.15rem;
	margin-bottom: -0.4rem;
}

#header h2 {
	font-size: 3.75rem;
	color: var(--darktext);
	margin-bottom: -0.4rem;
}

/* Main Game Content */
.main {
	margin: 2rem 0;
	position: relative;
	width: 80%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

/* (border-left-width 50px + border-right-width 50px) * 0.8660254 = 86.60254px  border-bottom-width = EquilateralTriangle height */
.triangle-outside {
	z-index: 0;
  width: 0;
	height: 0;
	border-right: 125px solid  transparent; 
	border-left: 125px solid  transparent; 
	border-top: calc((125px + 125px) * 0.8660254) solid var(--background2);
	position: absolute;
	left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto;
}

.triangle-inside {
	z-index: 0;
  width: 0;
	height: 0;
	border-right: 105px solid  transparent; 
	border-left: 105px solid  transparent; 
	border-top: calc((105px + 105px) * 0.8660254) solid var(--background1);
	position: absolute;
	top: 90px;
	left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto;
}

.btn {
	z-index: 1;
	cursor: pointer;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 155px;
	height: 155px;
	margin: 1rem 2rem;
}

.btn-game:active {
	box-shadow: none !important;
	transform: translateY(5px);
}

.btn-img {
	background-color: var(--white);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	box-shadow: inset 0px 5px var(--insetboxshadow);
}

.btn#paper {
	background: linear-gradient(to bottom, var(--paper2), var(--paper1));
	box-shadow: 0 5px var(--paper3);
}

.btn#scissors {
	background: linear-gradient(to bottom, var(--scissors2), var(--scissors1));
	box-shadow: 0 5px var(--scissors3);
}

.btn#rock {
	background: linear-gradient(to bottom, var(--rock2), var(--rock1));
	box-shadow: 0 5px var(--rock3);
}

/* Bonus Game Content */
.bonus {
	margin: 2rem 0;
	position: relative;
	width: 650px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.pentagon {
	z-index: 0;
	position: absolute;
	background-image: url('./public/bg-pentagon.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	height: 75%;
	width: 75%;

	left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto;
}

.row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.row1 {
	width: 100%;
	justify-content: center;
	margin-bottom: -3rem;
}

.row2 {
	width: 80%;
	margin-bottom: 1rem;
}

.row3 {
	width: 60%;
}

.bonus .btn {
	width: 130px;
	height: 130px;
}

.bonus .btn-img {
	width: 100px;
	height: 100px;
}

.bonus .btn-img img {
	height: 50px;
}

.btn#lizard {
	background: linear-gradient(to bottom, var(--lizard2), var(--lizard1));
	box-shadow: 0 5px var(--lizard3);
}

.btn#spock {
	background: linear-gradient(to bottom, var(--cyan2), var(--cyan1));
	box-shadow: 0 5px var(--cyan3);
}

/* Show game results */
.result {
	margin: 3rem 0 10rem 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.result-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.result-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0 2rem;
}

.result-title {
	z-index: 2;
	color: var(--white);
	font-size: 1.25rem;
	letter-spacing: 0.2rem;
	margin-bottom: 2rem;
}

#placeholder {
	width: 275px;
	height: 275px;
	margin: 1rem 0;
	background-color: var(--background2);
	z-index: 1;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.result-col .btn-result {
	z-index: unset;
	margin: 1rem 0;
	width: 275px;
	height: 275px;
	position: relative;
	cursor: unset;
}

.result-col #paper {
	box-shadow: 0 10px var(--paper3);
}

.result-col #scissors {
	box-shadow: 0 10px var(--scissors3);
}

.result-col #rock {
	box-shadow: 0 10px var(--rock3);
}

.result-col #lizard {
	box-shadow: 0 10px var(--lizard3);
}

.result-col #spock {
	box-shadow: 0 10px var(--cyan3);
}

.result-col .btn-result .btn-img {
	z-index: unset;
	width: 210px;
	height: 210px;
	box-shadow: inset 0px 10px var(--insetboxshadow);
}

.result-col .btn-result .btn-img img {
	height: 100px;
}

.btn-result.winner .btn-img::before {
	z-index: -18;
	content: '';
	position: absolute;
	display: block;
	background: radial-gradient(var(--background2) 0%, var(--background1) 80%);
	height: 400px;
	width: 400px;
	border-radius: 50%;
}

.btn-result.winner::before {
	z-index: -19;
	content: '';
	position: absolute;
	display: block;
	background: radial-gradient(var(--background2) 0%, var(--background1) 80%);
	height: 525px;
	width: 525px;
	border-radius: 50%;
}

.btn-result.winner::after {
	z-index: -20;
	content: '';
	position: absolute;
	display: block;
	background: radial-gradient(var(--background2) 0%, var(--background1) 80%);
	height: 650px;
	width: 650px;
	border-radius: 50%;
}

.play-again {
	z-index: 10;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0 4rem;
	width: 200px;
}

.play-again h1 {
	margin: 0;
	padding: 0;
	color: var(--white);
	font-size: 3rem;
	letter-spacing: 1px;
	width: 100%;
	text-align: center;
}

.play-again button {
	width: 100%;
	border: none;
	border-radius: 5px;
	padding: 0.8rem 0;
	margin: 1rem 0;
	font-family: inherit;
	letter-spacing: 2px;
	cursor: pointer;
}

.play-again button:hover, button:active {
	color: var(--rock1);
}

.play-again button:active {
	transform: scale(0.98);
}

#play-again-sm {
	display: none;
}

/* Access rules */
#rules-btn {
	position: absolute;
	bottom: 100px ;
	right: 20px;
	font-family: inherit;
	padding: 0.6rem 2.25rem;
	letter-spacing: 0.15rem;
	background-color: var(--background1);
	color: var(--white);
	border: 2px solid var(--headeroutline);
	border-radius: 8px;
	cursor: pointer;
}

.rules-modal {
	z-index: 100;
	position: absolute;
	background-color: var(--white);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2rem;
	border-radius: 10px;
	width: 400px;
}

.rules-modal .heading {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2.5rem;
	width: 100%;
}

.rules-modal .heading h1, img {
	padding: 0;
	margin: 0;
}

.rules-modal .heading h1 {
	color: var(--darktext);
}

.rules-modal .heading img {
	cursor: pointer;
}

#rules-img, #bonus-rules-img {
	width: 90%;
}

#rules-modal-bg {
	z-index: 99;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: var(--background2);
	opacity: 0.7;
}

#rules-close-btn-sm {
	display: none;
	cursor: pointer;
	margin: 4rem 0 0 0;
}

/* Toggle Game Mode */
#toggle-container {
	position: absolute;
	bottom: 35px ;
	right: 20px;
	display: flex;
	align-items: center;
	justify-content: end;
	margin: 1rem 0;
	width: 250px;
}

#toggle-container span {
	color: var(--white);
	font-size: 0.8rem;
	letter-spacing: 2px;
	margin-left: 0.5rem;
}

.toggle {
	visibility: hidden;
	margin-left: -0.7rem;
}

.label {
	position: relative;
	background-color: var(--headeroutline);
	border-radius: 50px;
	cursor: pointer;
	display: inline-block;
	margin: 0;
	width: 55px;
	height: 25px;
}

.toggle:checked + .label {
	background-color: var(--scoretext);
}

.ball {
	background-color: #fff;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	position: absolute;
	top: 2px;
	left: 3px;
	align-items: center;
	justify-content: center;
	animation: slideOff 0.3s linear forwards;
}

.toggle:checked + .label .ball {
	animation: slideOn 0.3s linear forwards;
}

.hidden {
	display: none !important;
}

/* Footer */
footer {
	flex-shrink: 0;
	height: fit-content;
	padding: 0.5rem;
	text-align: center;
	color: var(--white);
	font-size: 0.8rem;
	border-top: 5px;
	background-color: var(--scoretext);
	width: 100vw;
}

footer a {
	text-decoration: none;
	color: var(--white);
}

footer a:hover {
	color: var(--headeroutline);
}

/* Game toggle button animation */
@keyframes slideOn {
	0% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(15px);
	}

	100% {
		transform: translateX(30px);
	}
}

@keyframes slideOff {
	0% {
		transform: translateX(30px);
	}

	50% {
		transform: translateX(15px);
	}

	100% {
		transform: translateX(0);
	}
}

/* Smaller screen settings */
@media(max-width: 960px) {
	.result-title {
		font-size: 1rem;
		letter-spacing: 0.15rem;
		margin-bottom: 1rem;
	}

	#placeholder {
		width: 170px;
		height: 170px;
	}

	.result-col {
		margin: 0 0.2rem;
	}

	.result-col .btn-result {
		width: 170px;
		height: 170px;
	}
	
	.result-col #paper {
		box-shadow: 0 5px var(--paper3);
	}
	
	.result-col #scissors {
		box-shadow: 0 5px var(--scissors3);
	}
	
	.result-col #rock {
		box-shadow: 0 5px var(--rock3);
	}
	
	.result-col #lizard {
		box-shadow: 0 5px var(--lizard3);
	}
	
	.result-col #spock {
		box-shadow: 0 5px var(--cyan3);
	}
	
	.result-col .btn-result .btn-img {
		width: 130px;
		height: 130px;
		box-shadow: inset 0px 5px var(--insetboxshadow);
	}
	
	.result-col .btn-result .btn-img img {
		height: 60px;
	}
}

@media(max-width: 680px) {
	.container {
		width: 100%;
	}

	#header {
		width: 100%;
	}

	#header .img-box {
		height: 100%;
	}

	#header img {
		height: 100%;
	}

	.main {
		margin: 6rem 0;
		width: 100%;
	}

	.bonus {
		margin: 2rem 0;
		width: 100%;
	}
	
	.pentagon {
		height: 80%;
		width: 80%;
	}
	
	.row1 {
		width: 100%;
		justify-content: center;
		margin-bottom: -2rem;
	}
	
	.row2 {
		width: 55%;
		margin-bottom: 0.8rem;
	}
	
	.row3 {
		width: 42%;
	}
	
	.bonus .btn {
		width: 100px;
		height: 100px;
		margin: 0.5rem 0;
	}
	
	.bonus .btn-img {
		width: 77px;
		height: 77px;
	}
	
	.bonus .btn-img img {
		height: 32px;
	}

	.btn {
		width: 150px;
		height: 150px;
	}

	.btn-img {
		width: 120px;
		height: 120px;
	}

	.btn-img img {
		height: 60px;
	}
	
	.triangle-inside {
		top: 85px;
	}

	.result {
		margin: 3rem 0 3rem 0;
	}

	.result-row {
		width: 80%;
	}

	.result-title {
		font-size: 0.9rem;
		letter-spacing: 0.15rem;
		margin-bottom: 1rem;
	}

	#placeholder {
		width: 170px;
		height: 170px;
	}

	.result-col {
		margin: 0 2rem;
	}

	.result-col .btn-result {
		width: 150px;
		height: 150px;
	}
	
	.result-col .btn-result .btn-img {
		width: 115px;
		height: 115px;
	}
	
	.result-col .btn-result .btn-img img {
		height: 50px;
	}

	.btn-result.winner .btn-img::before {
		height: 200px;
		width: 200px;
	}
	
	.btn-result.winner::before {
		height: 275px;
		width: 275px;
	}
	
	.btn-result.winner::after {
		height: 350px;
		width: 350px;
	}

	#play-again {
		display: none;
	}
	
	#play-again-sm {
		display: block;
		margin: 2rem 0 0 0;
	}

	#rules-btn {
		position: relative;
		bottom: 0;
		right: 0;
		margin: 0 0 2rem 0;
	}

	#toggle-container {
		position: relative;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

@media(max-width: 600px) {
	#header {
		height: 125px;
	}

	#header .score-box {
		padding: .8rem 2rem;
	}

	#header h1 {
		font-size: 0.6rem;
	}
	
	#header h2 {
		font-size: 3.2rem;
	}

	.main {
		width: 90%;
	}

	.bonus {
		width: 90%;
	}

	.pentagon {
		height: 80%;
		width: 80%;
	}
	
	.row2 {
		width: 75%;
	}
	
	.row3 {
		width: 55%;
	}

	.btn {
		width: 100px;
		height: 100px;
		margin: 0.9rem 2rem;
	}

	.btn-img {
		width: 80px;
		height: 80px;
	}

	.btn-img img {
		height: 40px;
	}

	.triangle-outside {
		border-right: 80px solid  transparent; 
		border-left: 80px solid  transparent; 
		border-top: calc((80px + 80px) * 0.8660254) solid var(--background2);
	}
	
	.triangle-inside {
		border-right: 60px solid  transparent; 
		border-left: 60px solid  transparent; 
		border-top: calc((60px + 60px) * 0.8660254) solid var(--background1);
		top: 70px;
	}

	.rules-modal {
		border-radius: 0;
		width: 100%;
		height: 100%;
	}

	.rules-modal .heading {
		justify-content: center;
	}

	#rules-close-btn {
		display: none;
	}

	#rules-close-btn-sm {
		display: block;
	}
}

@media(max-width: 500px) {
	.row2 {
		width: 100%;
		margin-bottom: 0.8rem;
	}
	
	.row3 {
		width: 80%;
	}
}

@media(max-width: 430px) {
	.btn {
		margin: 0.4rem 1rem;
	}

	.triangle-inside {
		top: 55px;
	}
}

@media(max-width: 400px) {
	.btn {
		margin: 0.4rem 0.7rem;
	}
}