body {
	font-family: Arial, sans-serif;
	background: #f4f6f8;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	transition: 0.3s;
	cursor: none !important;
}

/* CONTAINER */

.container {
	background: white;
	padding: 40px 35px;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	text-align: center;
	width: 340px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* TITRE */

h1 {
	margin-bottom: 10px;
	font-size: 26px;
}

/* INPUTS */
input,
select {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 8px;
	border: 1px solid #d0d7de;
	font-size: 14px;
	background: #fafafa;
	transition: 0.2s;
	cursor: none;
}

input:hover,
select:hover {
	border: 1px solid;
	border-color: #ffffff;
}
input:focus,
select:focus {
	outline: none;
	border-color: #4c8bf5;
	background: white;
}

/* BOUTONS */

button {
	padding: 10px;
	border: none;
	border-radius: 8px;
	background: #5a5a5a;
	color: white;
	font-size: 15px;
	cursor: none;
	transition: 0.2s;
}

button:hover {
	background: #7a7a7a;
	transform: translateY(-1px);
}

.swap-btn {
	transition: transform 0.3s;
}

.swap-btn:active {
	transform: rotate(180deg);
}

/* BOUTON DARK MODE */

#themeToggle {
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 13px;
}

/* RESULTAT */

.result,
#result {
	margin-top: 10px;
	font-size: 20px;
	font-weight: bold;
}

.result-animation {
	animation: fade 1s ease;
}

@keyframes fade {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* GRAPH */

#chart {
	margin-top: 20px;
	max-width: 100%;
	background-color: white;
	border-radius: 20px;
}

/* DARK MODE */

body.dark {
	background: #121212;
	color: white;
}

body.dark .container {
	background: #1e1e1e;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

body.dark input,
body.dark select {
	background: #2a2a2a;
	color: white;
	border: 1px solid #444;
}

body.dark input:focus,
body.dark select:focus {
	border-color: #6fa8ff;
}

body.dark button {
	background: #3a3a3a;
}

body.dark button:hover {
	background: #555;
}

/* Error */
#error {
	color: #ff4d4d;
	font-size: 14px;
}

/* Input-Error */
.input-error {
	display: flex;
	flex-direction: column;
	align-items: left;
	text-align: left;
}

/* Rate */
#rate {
	font-size: 14px;
	opacity: 0.7;
	margin-top: -20px;
}

/* Settings */
#settings-button {
	position: fixed; /* fixe le bouton à l'écran */
	top: 20px; /* distance depuis le haut */
	left: 20px; /* distance depuis la gauche */
	background: #5a5a5a; /* couleur du bouton */
	color: white; /* icône en blanc */
	border: none;
	border-radius: 10px;
	padding: 10px;
	cursor: pointer;
	transition: 0.3s;
	z-index: 1000; /* au-dessus de tout */
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none; /* enlève le soulignement du lien */
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

#settings-button:hover {
	background: #7a7a7a;
	transform: rotate(15deg) scale(1.1); /* petit effet animé */
}

#settings {
	font-size: 22px; /* taille de l'icône */
	vertical-align: middle;
}

/* Back */
#back-button {
	position: fixed; /* fixe le bouton à l'écran */
	top: 20px; /* distance depuis le haut */
	left: 20px; /* distance depuis la gauche */
	background: #5a5a5a; /* couleur du bouton */
	color: white; /* icône en blanc */
	border: none;
	border-radius: 10px;
	padding: 10px;
	cursor: pointer;
	transition: 0.3s;
	z-index: 1000; /* au-dessus de tout */
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none; /* enlève le soulignement du lien */
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

#back-button:hover {
	background: #7a7a7a;
}

#back {
	font-size: 22px; /* taille de l'icône */
	vertical-align: middle;
}

/* Cursor */

.coin-cursor {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: radial-gradient(
		circle at 35% 35%,
		#fff9d0 0%,
		gold 40%,
		#b8860b 100%
	);
	box-shadow: 0 0 0 2px #b8860b, 0 0 12px rgba(245, 200, 66, 0.6),
		inset 0 1px 3px rgba(255, 255, 255, 0.5),
		inset 0 -1px 3px rgba(0, 0, 0, 0.4);
	position: fixed;
	pointer-events: none;
	transform: translate(-50%, -50%);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 900;
	color: #b8860b;
	font-family: serif;
	transition: width 0.15s, height 0.15s, box-shadow 0.15s;
}

body.hovering .coin-cursor {
	width: 36px;
	height: 36px;
	font-size: 15px;
	box-shadow: 0 0 0 2px #b8860b, 0 0 24px rgba(245, 200, 66, 0.9),
		0 0 48px rgba(245, 200, 66, 0.4), inset 0 1px 3px rgba(255, 255, 255, 0.5),
		inset 0 -1px 3px rgba(0, 0, 0, 0.4);
}

body.clicking .coin-cursor {
	width: 20px;
	height: 20px;
	font-size: 9px;
}

body.spinning .coin-cursor {
	animation: coinFlip 0.5s ease-in-out;
}

#coin-cursor {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: radial-gradient(
		circle at 35% 35%,
		#fff9d0 0%,
		gold 40%,
		#b8860b 100%
	);
	box-shadow: 0 0 0 2px #b8860b, 0 0 12px rgba(245, 200, 66, 0.6),
		inset 0 1px 3px rgba(255, 255, 255, 0.5),
		inset 0 -1px 3px rgba(0, 0, 0, 0.4);
	position: fixed !important;
	pointer-events: none;
	transform: translate(-50%, -50%);
	z-index: 99999 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 900;
	color: #b8860b;
	font-family: serif;
	transition: width 0.15s, height 0.15s, box-shadow 0.15s;
}

@keyframes coinFlip {
	0% {
		transform: translate(-50%, -50%) rotateY(0deg);
	}
	25% {
		transform: translate(-50%, -50%) rotateY(90deg) scaleX(0.1);
	}
	50% {
		transform: translate(-50%, -50%) rotateY(180deg);
	}
	75% {
		transform: translate(-50%, -50%) rotateY(270deg) scaleX(0.1);
	}
	100% {
		transform: translate(-50%, -50%) rotateY(360deg);
	}
}

.sparkle {
	position: fixed;
	pointer-events: none;
	z-index: 9998;
	border-radius: 50%;
	background: gold;
	animation: sparkleAnim 0.6s ease-out forwards;
}

@keyframes sparkleAnim {
	0% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0) translateY(-20px);
	}
}