@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Raleway:wght@700;800&display=swap');

/* ===========================================
   Design Tokens — matches MyStyle.css
   =========================================== */
:root {
	--bg-dark: #110a05;
	--bg-card: #1c120a;
	--accent: #f59e0b;
	--accent-hover: #fbbf24;
	--accent-glow: rgba(245, 158, 11, 0.35);
	--white: #fefce8;
	--muted: #a1a1aa;
	--border: rgba(245, 158, 11, 0.15);
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--btn-default: #7a4a10;
	--transition: 0.25s ease;
}

/* ===========================================
   Reset
   =========================================== */
*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

html {
	font-size: 62.5%;
}

/* ===========================================
   Body / Page
   =========================================== */
body {
	min-height: 100vh;
	background: radial-gradient(ellipse at 50% 0%, rgba(245, 158, 11, 0.15) 0%, transparent 60%),
		linear-gradient(160deg, #110a05 0%, #1a0f08 100%);
	color: var(--white);
	opacity: 0;
	animation: revealPage 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes revealPage {
	from {
		opacity: 0;
		transform: scale(0.98) translateY(10px);
	}

	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* ===========================================
   Back link
   =========================================== */
.back-link {
	position: fixed;
	top: 1.6rem;
	left: 2.4rem;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--muted);
	padding: 0.7rem 1.4rem;
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: color var(--transition), background var(--transition);
	z-index: 10;
}

.back-link:hover {
	color: var(--white);
	background: rgba(255, 255, 255, 0.06);
}

/* ===========================================
   Game layout
   =========================================== */
.game {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	width: 100vw;
	justify-content: center;
	align-items: center;
	gap: 1.6rem;
	padding: 8rem 2rem 4rem;
}

/* ===========================================
   Title
   =========================================== */
.title {
	font-family: 'Raleway', sans-serif;
	font-size: 3.6rem;
	font-weight: 800;
	color: var(--white);
	letter-spacing: 0.02em;
	text-align: center;
	position: relative;
	padding-bottom: 1.2rem;
}

.title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 50px;
	height: 3px;
	background: var(--accent);
	border-radius: 2px;
}

/* ===========================================
   Score Board
   =========================================== */
.score {
	display: flex;
	gap: 4rem;
	justify-content: center;
}

.playerScore,
.computerScore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.8rem;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 1.6rem 3.2rem;
	min-width: 120px;
}

.playerScore h2,
.computerScore h2 {
	font-family: 'Poppins', sans-serif;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.p-count,
.c-count {
	font-size: 3.2rem;
	font-weight: 700;
	color: var(--accent);
	background: none;
	line-height: 1;
}

/* ===========================================
   Status text
   =========================================== */
.move {
	font-size: 1.8rem;
	font-weight: 600;
	color: var(--white);
	background: none;
}

.movesleft {
	font-size: 1.4rem;
	color: var(--muted);
	background: none;
}

/* ===========================================
   Hands
   =========================================== */
.hands {
	display: flex;
	gap: 4rem;
	justify-content: center;
	font-size: 5.6rem;
	margin: 0.8rem 0;
	background: none;
}

.player-hand,
.computer-hand {
	background: none;
	line-height: 1;
}

.computer-hand {
	transform: scaleX(-1);
}

/* ===========================================
   Option Buttons
   =========================================== */
.options {
	display: flex;
	gap: 1.6rem;
	justify-content: center;
	flex-wrap: wrap;
}

.rock,
.paper,
.scissor {
	padding: 1.2rem 2.4rem;
	min-width: 110px;
	border-radius: var(--radius-md);
	background: var(--btn-default);
	color: var(--white);
	font-size: 1.6rem;
	font-weight: 600;
	font-family: 'Poppins', sans-serif;
	border: 1px solid rgba(245, 158, 11, 0.2);
	cursor: pointer;
	outline: none;
	transition: background var(--transition), color var(--transition),
		transform 0.1s ease, box-shadow var(--transition);
}

.rock:hover,
.paper:hover,
.scissor:hover {
	background: linear-gradient(135deg, var(--accent), #fde68a);
	color: #110a05;
	transform: translateY(-3px);
	box-shadow: 0 6px 20px var(--accent-glow);
}

.rock:active,
.paper:active,
.scissor:active {
	transform: scale(0.96);
	box-shadow: none;
}

/* ===========================================
   Computer move / round result text
   =========================================== */
.computer_move {
	font-size: 1.5rem;
	color: var(--muted);
	background: none;
	min-height: 2rem;
	text-align: center;
}

.result {
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--white);
	background: none;
	min-height: 2rem;
	text-align: center;
}

/* ===========================================
   Reload / Restart Button
   =========================================== */
.reload {
	display: none;
	padding: 1.2rem 3.2rem;
	background: var(--accent);
	color: #110a05;
	font-size: 1.6rem;
	font-weight: 700;
	font-family: 'Poppins', sans-serif;
	border: none;
	border-radius: 5rem;
	cursor: pointer;
	outline: none;
	transition: background var(--transition), transform var(--transition),
		box-shadow var(--transition);
}

.reload:hover {
	background: linear-gradient(135deg, var(--accent-hover), #fde68a);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px var(--accent-glow);
}

/* ===========================================
   Shake / animation keyframes (unchanged logic)
   =========================================== */
@keyframes shake {
	0% {
		transform: scale(1) translateY(0);
	}

	25% {
		transform: scale(1.1) translateY(-5px) rotate(-5deg);
		box-shadow: 0 5px 15px var(--accent-glow);
	}

	50% {
		transform: scale(1.1) translateY(0) rotate(5deg);
		box-shadow: 0 5px 15px var(--accent-glow);
	}

	75% {
		transform: scale(1.1) translateY(-5px) rotate(-5deg);
		box-shadow: 0 5px 15px var(--accent-glow);
	}

	100% {
		transform: scale(1) translateY(0) rotate(0deg);
		box-shadow: none;
	}
}

.animating {
	animation: shake 0.5s ease-in-out infinite;
}

@keyframes shakePlayer {
	0% {
		transform: translateY(0) rotate(0deg);
	}

	25% {
		transform: translateY(-20px) rotate(-10deg);
	}

	50% {
		transform: translateY(0) rotate(0deg);
	}

	75% {
		transform: translateY(-20px) rotate(-10deg);
	}

	100% {
		transform: translateY(0) rotate(0deg);
	}
}

@keyframes shakeComputer {
	0% {
		transform: scaleX(-1) translateY(0) rotate(0deg);
	}

	25% {
		transform: scaleX(-1) translateY(-20px) rotate(-10deg);
	}

	50% {
		transform: scaleX(-1) translateY(0) rotate(0deg);
	}

	75% {
		transform: scaleX(-1) translateY(-20px) rotate(-10deg);
	}

	100% {
		transform: scaleX(-1) translateY(0) rotate(0deg);
	}
}

.player-hand.shake {
	animation: shakePlayer 0.5s ease-in-out infinite;
}

.computer-hand.shake {
	animation: shakeComputer 0.5s ease-in-out infinite;
}

/* ===========================================
   Responsive
   =========================================== */
@media screen and (max-width: 612px) {
	.title {
		font-size: 2.8rem;
	}

	.score {
		gap: 2rem;
	}

	.options {
		gap: 1.2rem;
	}

	.rock,
	.paper,
	.scissor {
		min-width: 90px;
		font-size: 1.4rem;
		padding: 1rem 1.6rem;
	}

	.hands {
		font-size: 4rem;
		gap: 2.4rem;
	}
}