:root {
	--ball-animation-duration: 120s;
	--wheel-size: 312px; /* Taille de base de la roue */
	--ball-track-size-width: 212px; /* Taille de base de la piste de la balle */
	--ball-track-size-height: 207px; /* Taille de base de la piste de la balle */
	--ball-track-size-left: 47.5px; /* Taille de base de la piste de la balle */
	--ball-track-size-top: 50px; /* Taille de base de la piste de la balle */

	--ball-size: 16px; /* Taille de base de la balle */
	--ball-size-left: 109px; /* Taille de base de la balle */
	--ball-size-top: -8px; /* Taille de base de la balle */

	--thend-one-top: -6px; /* Taille de base de la balle */
	--thend-one-left: -20px; /* Taille de base de la balle */


	--thend-two-top: -6px; /* Taille de base de la balle */
	--thend-two-left: 83px; /* Taille de base de la balle */


	--outer-rim-border: 10px; 
	--outer-rim-box-shadow: 8px;
	--outer-rim-box-width: 290px; 
	--outer-rim-box-height: 290px; 

	--block-width: 290px; 
	--block-height: 290px;
	--block-clip-1: 0px;
	--block-clip-2: 145px;
	--block-clip-3: 290px;
	--block-clip-4: 0px;

	--sect-width: 290px; 
	--sect-height: 290px; 
	--sect-top: 10px; 
	--sect-left: 10px;
	--sect-clip-1: 0px;
	--sect-clip-2: 290px;
	--sect-clip-3: 290px;
	--sect-clip-4: 145px;


	--double-single-font-size: 14px;

	--double-left: 148px; 
	--double-margin-top: 4,5px;

	--single-left: 152px; 
	--single-margin-top: 4,5px;



	--pockets-width: 235px; 
	--pockets-height: 235px; 
	--pockets-top: 37px; 
	--pockets-left: 37px; 

	--pockets-rim-width: 235px; 
	--pockets-rim-height: 235px; 
	--pockets-rim-top: 34px; 
	--pockets-rim-left: 34px; 
	--pockets-rim-border: 3px; 

	--cone-width: 180px; 
	--cone-height: 180px; 
	--cone-top: 62px;
	--cone-left: 61px; 
	--cone-border: 3px; 




}


html, body{
	font-family: arial;
	cursor: default;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#game-wrapper{
	flex: 1;
	display: flex;
	justify-content: center;
	background-color: #016D29;
	height: 1000px;
	padding: 20px;
	color: #fff;
}

#game-wrapper {
	display: flex;
	justify-content: center;
	align-items: start; /* Aligns items to the start of the flex container */
}


/*notification*/
#notification{
	position: absolute;
	width: 900px;
	height: 660px;
	background-color: rgba(173, 2, 5, 0.5); /* Le dernier chiffre (0.5) représente 50% de transparence */

	z-index: 10;
	border: 8px solid #d3b201;
	border-radius: 12px;
	transition: 1s;
}
#global-options-panel {
	background-color: #4a4a4a; /* Couleur de fond sombre du casino */
	color: #ffffff; /* Texte blanc pour le contraste */
	padding: 15px;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Ombre pour un effet 3D */
	margin-top: 20px; /* Espace au-dessus du panneau */
	position: absolute; /* Positionnement absolu par rapport à son conteneur le plus proche positionné */
	top: 10px; /* Espace par rapport au haut de l'écran */
	left: 10px;

}

#global-options-panel .option {
	background-color: #333333; /* Couleur de fond pour chaque option */
	padding: 10px;
	margin-bottom: 15px; /* Espace entre les options */
	border-radius: 5px;
}

#global-options-panel .option p {
	color: #ffec00; /* Couleur dorée pour les titres des options */
	text-align: center;
	margin-top: 5px; /* Espace entre le label et le titre */
	font-weight: bold;
}

#global-options-panel input[type="radio"] {
	accent-color: #d4af37; /* Couleur dorée pour les boutons radio */
	margin-right: 5px; /* Espace à droite des boutons radio */
}

#global-options-panel label {

	text-align: center; /* Centrer le texte des labels */
	margin-bottom: 5px; /* Espace sous chaque label */
}
.radio-button-container {
	margin-right: 50px; /* Espace à droite des boutons radio */
}
#container {
	position: relative;
}

.option-container {
	display: flex; /* Utiliser flexbox pour l'alignement */
	align-items: center; /* Centrer les éléments verticalement */
	margin-bottom: 10px; /* Espace entre les options */
}
.nSpan{
	display: block;
	position: relative;
	top: 200px;
	font-size: 200px;
	text-align: center;
	-webkit-text-stroke: 2px white;
	text-shadow:
			-1px -1px 0 #fff,
			1px -1px 0 #fff,
			-1px  1px 0 #fff,
			1px  1px 0 #fff;
}

.nBtn{
	display: block;
	position: relative;
	top: 116px;
	left: 25%;
	width: 45%;
	padding: 10px;
	font-size: 32px;
	text-align: center;
	background-color: green;
	border-radius: 15px;
	box-shadow: 3px 4px rgb(0 0 0 / 25%);
	cursor: pointer;
	transition: .5s;
}

.nBtn:active{
	top: 118px;
	left: calc(25% + 2px);
	box-shadow: 1px 2px rgb(0 0 0 / 25%);
}

.nsWin{
	position:absolute;
	left: 4px;
}


.none{
	display: none;
}

.nsWinBlock{
	display: inline-block;
	font-size: 21px;
	border-right: 1px solid;
	border-left: 1px solid;
	padding-left: 40px;
	padding-right: 40px;
}
/*notification end*/

/*betting table*/
#betting_board{
	width: 500px;
    height: 315px;
    border: 1px solid;
}

.bbtop{
	margin-left:2px;
}

.bbtoptwo{
	width: calc(50% - 8px);
	border: 1px solid;
	display: inline-block;
	padding: 12px 4px;
	margin-left: -2px;
	text-align: center;
	font-size:20px;
	font-weight: bold;
}

.number_board{
	margin-left: 1px;
}

.number_block{
	width: 39.94px;
    border: 1px solid;
    text-align: center;
    display: inline-block;
    margin: 0 -0.2px;
    padding: 32px 0px;
}

.nbn{
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}


.spinBtn {
	position: absolute;
	bottom: 300px; /* Adjust as necessary to position the button */
	left: 25%; /* Center the button horizontally */
	font-size: 18px; /* Larger font size for better readability */
	cursor: pointer;

	background-color: #d4af37; /* A gold color to give it a rich feel */
	color: #fff; /* White text color for contrast */
	font-weight: bold;
	padding: 15px 30px; /* Larger padding for a bigger button */
	border: none; /* No border for a cleaner look */
	border-radius: 50px; /* Rounded corners */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Shadow for a 3D effect */
	transition: transform 0.2s, box-shadow 0.2s; /* Transition for the press effect */
	user-select: none; /* Disable text selection on the button */
}


#show-options-panel {
	top: 10px;
	left: 10px;
	background-color: #d4af37; /* A gold color to give it a rich feel */
	color: #fff; /* White text color for contrast */
	font-weight: bold;
	padding: 15px 30px; /* Larger padding for a bigger button */
	border: none; /* No border for a cleaner look */
	border-radius: 50px; /* Rounded corners */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Shadow for a 3D effect */
	transition: transform 0.2s, box-shadow 0.2s; /* Transition for the press effect */
	user-select: none; /* Disable text selection on the button */
}

#toggleMusiqueDeFondPlayPause, #toggleBruitBillePlayPause {
	font-size: 16px;
	cursor: pointer;
	background-color: #d4af37; /* Gold color to match the spin button */
	color: #fff; /* White text for contrast */
	font-weight: bold;
	padding: 10px 20px; /* Padding to make the buttons sizable */
	border: none;
	border-radius: 50px; /* Rounded corners for a smooth look */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Shadow for depth */
	transition: transform 0.2s, box-shadow 0.2s; /* Smooth transition for interaction */
	margin: 5px; /* Add margin around the buttons */
	user-select: none; /* Disable text selection on the buttons */
}

#toggleMusiqueDeFondPlayPause:hover, #toggleBruitBillePlayPause:hover {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Hover effect */
}

#toggleMusiqueDeFondPlayPause:active, #toggleBruitBillePlayPause:active {
	transform: translateY(2px); /* Pressed effect */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Adjust shadow when pressed */
}

.spinBtn:hover {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Slightly larger shadow on hover for a lifting effect */
}

.spinBtn:active {
	transform: translateX(-50%) translateY(2px); /* Slight move down to mimic a press */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Smaller shadow to give an impression of being pressed */
}
.redNum{
	background-color: #E0080B;
}

.blackNum{
	background-color: #000;
}

.number-circle {
	display: inline-block;
	margin: 5px;
	width: 50px; /* Circle size */
	height: 50px; /* Circle size */
	line-height: 50px; /* Align text vertically */
	text-align: center;
	border-radius: 50%;
	font-weight: bold;
	font-size: 1.2em; /* Adjust the font size */
	background: #ff0; /* Gold/yellow background */
	color: #333; /* Text color */
}



.clearBet{
	border-color:red;
	background-color:red;
	color:#fff;
	margin-left:22px;
}


#historyNumbers {
	width: 150px; /* Set a fixed width to contain the numbers */
/*	height: 670px;*/
	overflow: hidden; /*
	/*margin-top: 10px;  Space from the top of the container */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	position: relative; /* Relative to place absolutely positioned children */
	background-color: #333; /* Dark background for the block */
}

#historyNumbersContent {
	display: flex; /* Using flexbox for vertical layout */
	flex-direction: column; /* Stack children vertically */
	overflow-y: auto; /* Allow vertical scrolling */
	width: 100%;
	max-height: 100%;
	padding: 5px; /* Padding around the content */
}

.historyNumbersContentNumber {
	width: 50%; /* Width of each number block */
	margin: 2px 0; /* Margin for spacing between number blocks */
	text-align: center; /* Center the text inside the block */
	border-radius: 5px; /* Rounded corners for the blocks */
	font-size: 30px; /* Font size for the numbers */
	color: #fff; /* White text color */
}

.pnRed {
	background-color: red; /* Red background for 'hot' numbers */
}

.pnBlack {
	background-color: black; /* Black background for 'cold' numbers */
}

.pnGreen {
	background-color: green; /* Green background for zero (you can adjust if necessary) */
}

/* Odd and even child styling for alternating effect */
#historyNumbersContent .historyNumbersContentNumber:nth-child(odd) {
	align-self: flex-end; /* Align to the right */
}

#historyNumbersContent .historyNumbersContentNumber:nth-child(even) {
	align-self: flex-start; /* Align to the left */
}
/*betting table end*/

/*wheel*/
@keyframes wheelRotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
@keyframes ballRotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-360deg);
	}
}


.wheel {
	height: var(--wheel-size);
	width: var(--wheel-size);
	position: relative;
}


/* CSS pour cacher la div hors de l'écran à droite */
.div-hidden-right {
	position: absolute;
	/* Déplace la div de 100% de sa propre largeur plus une marge supplémentaire pour garantir qu'elle est hors de l'écran */
	transform: translateX(calc(100% + 100px));
	visibility: hidden; /* rend la div invisible pour l'accessibilité */
	transition: transform 1s, visibility 1s;
}

/* CSS pour afficher la div à partir de la gauche */
.div-visible-right {

	transform: translateX(0); /* remet la div à sa position initiale */
	visibility: visible; /* rend la div visible */
	transition: delay, transform 1s, visibility 1s;
}

/* CSS pour cacher la div hors de l'écran à droite */
.div-hidden-left {
	position: absolute;
	transform: translateX(calc(-100% - 100px)); /* déplace la div entièrement hors de l'écran sur la droite */
	visibility: hidden; /* rend la div invisible pour l'accessibilité */
	transition: transform 1s, visibility 1s;
}

/* CSS pour afficher la div à partir de la gauche */
.div-visible-left {
	transform: translateX(0); /* remet la div à sa position initiale */
	visibility: visible; /* rend la div visible */
	transition: delay, transform 1s, visibility 1s;
}

.div-hidden-up {
	position: absolute;
	transform: translateY(calc(100% + 100px)); /* déplace la div entièrement hors de l'écran sur la droite */
	visibility: hidden; /* rend la div invisible pour l'accessibilité */
	transition: transform 1s, visibility 1s;
}

/* CSS pour afficher la div à partir de la gauche */
.div-visible-up {
	transform: translateY(0); /* remet la div à sa position initiale */
	visibility: visible; /* rend la div visible */
	transition: delay, transform 1s, visibility 1s;
}
.div-hidden-down {
	position: absolute;
	transform: translateY(calc(-100% - 100px)); /* déplace la div entièrement hors de l'écran sur la droite */
	visibility: hidden; /* rend la div invisible pour l'accessibilité */
	transition: transform 1s, visibility 1s;
}

/* CSS pour afficher la div à partir de la gauche */
.div-visible-down {
	transform: translateY(0); /* remet la div à sa position initiale */
	visibility: visible; /* rend la div visible */
	transition: delay, transform 1s, visibility 1s;
}

	
.ballTrack{
	width: var(--ball-track-size-width);
	height: var(--ball-track-size-height);
	position: absolute;
	left: var(--ball-track-size-left);
	top: var(--ball-track-size-top);
	border-radius: 100%;
	z-index:2;
}

.ball{
	background-color: #fff;
	width: var(--ball-size);
	height: var(--ball-size);
	border-radius: 100%;
	position: relative;
	left: var(--ball-size-left);
	top: var(--ball-size-top);
}
	
.turret{

}
	
.turretHandle{

}

.thendOne, .thendTwo{


}

.thendOne{
	top: var(--thend-one-top);
	left: var(--thend-one-left);
}

.thendTwo{
	top: var(--thend-two-top);
	left: var(--thend-two-left);
}



.outerRim {
	position: absolute;
	left:0;
	top:0;
	width: var(--outer-rim-box-width);
	height: var(--outer-rim-box-height);
	border-radius: 100%;
	box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
	border: var(--outer-rim-border) solid #F3c620;
}

.block {
	/*transition: all 1s;*/
	position: absolute;
	width: var(--block-width);
	height: var(--block-height);
	border-radius: 100%;
	clip: rect(var(--block-clip-1), var(--block-clip-2), var(--block-clip-3), var(--block-clip-4));
}

.sect {
	position: absolute;
	top:var(--sect-top);
	left:var(--sect-left);
	width: var(--sect-width);
	height: var(--sect-height);
	border-radius: 100%;
	clip: rect(var(--sect-clip-1), var(--sect-clip-2), var(--sect-clip-3), var(--sect-clip-4));

}

.double, .single{
	position: absolute;
	z-index: 1;
	color: #fff;
	font-size: var(--double-single-font-size);
	transform: rotate(3deg);
}


.double{
	left: var(--double-left);
	margin-top: var(--double-margin-top);
}

.single{
	left: var(--single-left);
	margin-top: var(--single-margin-top);
}

#sect1 .block {
	background-color: #016D29;
	transform:rotate(9.73deg);
}

#sect2 .block, #sect4 .block, #sect6 .block, #sect8 .block, #sect10 .block, #sect12 .block, #sect14 .block, #sect16 .block, #sect18 .block, #sect20 .block, #sect22 .block, #sect24 .block, #sect26 .block, #sect28 .block, #sect30 .block, #sect32 .block, #sect34 .block, #sect36 .block {
	background-color: #E0080B;
	transform: rotate(9.73deg);
}

#sect3 .block, #sect5 .block, #sect7 .block, #sect9 .block, #sect11 .block, #sect13 .block, #sect15 .block, #sect17 .block, #sect19 .block, #sect21 .block, #sect23 .block, #sect25 .block, #sect27 .block, #sect29 .block, #sect31 .block, #sect33 .block, #sect35 .block, #sect37 .block {
	background-color: #000;
	transform: rotate(9.73deg);
}

#sect2 {
	transform: rotate(9.73deg);
}

#sect3 {
	transform: rotate(19.46deg);
}

#sect4 {
	transform: rotate(29.19deg);
}

#sect5 {
	transform: rotate(38.92deg);
}

#sect6 {
	transform: rotate(48.65deg);
}

#sect7 {
	transform: rotate(58.38deg);
}

#sect8 {
	transform: rotate(68.11deg);
}

#sect9 {
	transform: rotate(77.84deg);
}

#sect10 {
	transform: rotate(87.57deg);
}

#sect11 {
	transform: rotate(97.3deg);
}

#sect12 {
	transform: rotate(107.03deg);
}

#sect13 {
	transform: rotate(116.76deg);
}

#sect14 {
	transform: rotate(126.49deg);
}

#sect15 {
	transform: rotate(136.22deg);
}

#sect16 {
	transform: rotate(145.95deg);
}

#sect17 {
	transform: rotate(155.68deg);
}

#sect18 {
	transform: rotate(165.41deg);
}

#sect19 {
	transform: rotate(175.14deg);
}

#sect20 {
	transform: rotate(184.87deg);
}

#sect21 {
	transform: rotate(194.6deg);
}

#sect22 {
	transform: rotate(204.33deg);
}

#sect23 {
	transform: rotate(214.06deg);
}

#sect24 {
	transform: rotate(223.79deg);
}

#sect25 {
	transform: rotate(233.52deg);
}

#sect26 {
	transform: rotate(243.25deg);
}

#sect27 {
	transform: rotate(252.98deg);
}

#sect28 {
	transform: rotate(262.71deg);
}

#sect29 {
	transform: rotate(272.44deg);
}

#sect30 {
	transform: rotate(282.17deg);
}

#sect31 {
	transform: rotate(291.9deg);
}

#sect32 {
	transform: rotate(301.63deg);
}

#sect33 {
	transform: rotate(311.36deg);
}

#sect34 {
	transform: rotate(321.09deg);
}

#sect35 {
	transform: rotate(330.82deg);
}

#sect36 {
	transform: rotate(340.55deg);
}

#sect37 {
	transform: rotate(350.28deg);
}



.pockets {
	position: absolute;
	top: var(--pockets-top);
	left: var(--pockets-left);
	width: var(--pockets-width);
	height: var(--pockets-height);
	background-color: #000;
	border-radius: 100%;
	opacity: .5;
}

.pocketsRim {
	position: absolute;
	top: var(--pockets-rim-top);
	left: var(--pockets-rim-left);
	width: var(--pockets-rim-width);
	height: var(--pockets-rim-height);
	border-radius: 100%;
	border: var(--pockets-rim-border) solid silver;
}
	
.cone {
	position: absolute;
	top: 50% ;
	left: 50%;
	transform: translate(-50%, -50%);

	z-index: 1;
	height: var(--cone-height);
	width: var(--cone-width);
	border: var(--cone-border) solid #9f9a9a;
	border-radius: 100%;
	background-size: cover;
	background-position: center;
}
/*wheel end*/

/*chip*/
.chip{
    width: 21px;
	height: 21px;
	background-color:#fff;
	border: 3px solid;
	border-radius: 100%;
    position:absolute;
}

.chipSpan{
	color: #000;
	font-weight: bold;
	font-size: 11px;
	position: relative;
	display: block;
	text-align: center;
	top: 4px;
}

.gold{
	border-color:gold;
}

.red{
	border-color:red;
}

.orange{
	border-color:orange;
}

.blue{
	border-color:blue;
}

.tt1_block .chip{
	margin-left: 19px;
	margin-top: -24px;
}

.number_block .chip{
	margin-left: 7px;
	margin-top: -24px;
}

.wlrtl .chip{
	margin-left: -9px;
	margin-top: 9px;
}

.cbbb .chip{
	margin-left: -4px;
	margin-top: -5px;
}

.ttbbetblock .chip{
	margin-left: -7px;
	margin-top: -8px;
}

#wlttb_top .chip{
	margin-left: -5px;
	margin-top: -8px;
}

.bbtoptwo .chip{
	margin-left: 108px;
	margin-top: -25px;
}

.number_0 .chip{
	margin-left: -8px;
	margin-top: -22px;
}

.bo3_block .chip{
	margin-left: 65px;
	margin-top: -26px;
}

.oto_block .chip{
	margin-left: 45px;
	margin-top: -25px;
}
#stats-panel {

	margin-left: 6em;
	/*flex-basis: 200px;*/
	right: 1%;
	top: 1%; /* Adjust as necessary */
	/*width: 200px; /* Adjust width as needed */
	background-color: #333; /* Dark background for the side panel */
	color: #fff;
	padding: 10px;
	/*height: 650px;*/
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Stylisation de l'input pour le temps du décompte en minutes */
#tempsDecompteMinute {
	background-color: #fff; /* Fond blanc pour une bonne visibilité */
	border: 2px solid #d4af37; /* Bordure dorée pour s'accorder avec le thème */
	border-radius: 5px; /* Bords arrondis */
	color: #333; /* Texte foncé pour contraster avec le fond */
	padding: 5px 10px; /* Padding interne pour plus de confort */
	font-size: 16px; /* Taille de police appropriée */
	outline: none; /* Supprime le contour lors de la sélection */
	width: 100%; /* Utilise toute la largeur disponible */
	box-sizing: border-box; /* S'assure que le padding et la bordure sont inclus dans la largeur */
	margin-bottom: 10px; /* Espacement avec l'élément suivant */
}

#revolut-img {
	width: var(--wheel-size); /* Largeur de l'image */
	height: auto; /* Hauteur ajustée automatiquement pour conserver les proportions */
	display: block; /* Assure que l'image soit sur une nouvelle ligne et permet l'application de margin auto pour centrer */
	margin: 0 auto; /* Centre l'image horizontalement */
	border-radius: 10px; /* Arrondit les coins de l'image */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ajoute une ombre pour un effet en profondeur */
}


#tempsDecompteMinute::placeholder {
	color: #aaa; /* Couleur plus claire pour le texte du placeholder */
}

#tempsDecompteMinute:focus {
	border-color: #ffec00; /* Couleur de bordure au focus */
	box-shadow: 0 0 5px rgba(222, 175, 55, 0.5); /* Légère ombre pour mettre en valeur */
}


#container-title{
	position: absolute;
}
#stats-panel h2 {
	text-align: center;
	margin-bottom: 10px;
}

#last-number {
	font-size: 2em;
	text-align: center;
	margin-bottom: 20px;
	-webkit-text-stroke: 1px white;

}
#close-options-panel, #show-options-panel {
	padding: 5px 10px;
	font-size: 16px;
	cursor: pointer;
	border: none;
	background-color: #d4af37; /* Or, couleur dorée */
	color: #fff; /* Texte blanc */
	border-radius: 5px; /* Bords arrondis */
}

#close-options-panel:hover, #show-options-panel:hover {
	background-color: #b3962f; /* Un peu plus foncé au survol */
}
#last-number-value {
	font-size: 4em; /* Large font size for emphasis */
	color: #ff0; /* Gold/yellow color */
	font-weight: bold;
	-webkit-text-stroke: 2px white;
	text-shadow:
			-1px -1px 0 #fff,
			1px -1px 0 #fff,
			-1px  1px 0 #fff,
			1px  1px 0 #fff;
}

#hot-numbers, #cold-numbers {
	margin-bottom: 20px;
}


#hot-list, #cold-list {
	list-style-type: none;
	padding: 0;
	text-align: center;
}

#hot-list li {
	display: inline-block;
	margin: 5px;
	font-size: 30px;

	padding: 5px;
	background: #ddd;
	border-radius: 5px;
}

#cold-list li {
	display: inline-block;
	font-size: 30px;
	margin: 5px;
	padding: 5px;
	background: #ddd;
	border-radius: 5px;
}

/* Add icons via CSS if you have the font icon library loaded */
.hot-icon {
	background-image: url('../img/fire-icon.svg');
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 30px; /* Adjust according to your icon size */
}

.cold-icon {
	background-image: url('../img/fire-icon.svg');
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 30px; /* Adjust according to your icon size */
}
#undrawn-numbers {
	margin-top: 20px;
}

#undrawn-numbers h2 {
	text-align: center;
	margin-bottom: 10px;
}

#undrawn-list {
	list-style-type: none;
	padding: 0;
	text-align: center;
}

#undrawn-list li {
	display: inline-block;
	margin: 5px;
	padding: 5px;
	font-size: 30px;
	background: #ddd;
	border-radius: 5px;
}


/* TIMER*/
.title-countdown{
	text-align: center;
	display: block;
	font-size: 3em;
	margin-block-start: 0.83em;
	margin-block-end: 0.83em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold;
	unicode-bidi: isolate;
}

.title-countdown-after{
	text-align: center;
	display: block;
	font-size: 5em;
	margin-block-start: 0.83em;
	margin-block-end: 0.83em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold;
	unicode-bidi: isolate;
}
.title-rien-ne-va-plus {
	position: absolute; /* Positionnement absolu pour un contrôle précis */
	top: 50%; /* Centre verticalement */
	left: 50%; /* Centre horizontalement */
	transform: translate(-50%, -50%); /* Décale le texte pour centrer précisément */
	text-align: center;
	display: block;
	font-size: 3em; /* Taille de base */
	font-weight: bold;
	unicode-bidi: isolate;
	animation: growAndDisappearCenter 4s forwards; /* Exécutée une seule fois, reste sur le dernier frame de l'animation */
}

@keyframes growAndDisappearCenter {
	0% {
		transform: translate(-50%, -50%) scale(1); /* Commence à l'échelle normale */
		opacity: 1;
	}
	50% {
		transform: translate(-50%, -50%) scale(3); /* Agrandit */
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -50%) scale(0); /* Rétrécit jusqu'à disparaître */
		opacity: 0;
	}
}

@keyframes pulse {
	0%, 100% {
		font-size: 3em; /* Taille initiale et finale, correspondant à l'état rétréci */
		opacity: 0.5; /* Démarrer et terminer semi-transparent pour un effet plus doux */
	}
	25%, 75% {
		font-size: 5em; /* Taille agrandie */
		opacity: 1; /* Pleine opacité au milieu de l'animation */
	}
}
.timer{
	background-color: #333;
}
#countdown {
	position: relative;
	z-index: 1;
	margin: 10px;
	height: var(--wheel-size);
	width: var(--wheel-size);
}

svg circle#c2 {
	stroke-dasharray: 113px;
	stroke-dashoffset: 0px;
	stroke: #198051;
	animation: countdown var(--ball-animation-duration) linear infinite forwards;
}

svg circle#c3 {
	stroke: #198051;
	opacity: .3;
}

circle#c1 {
	fill: lime;
	animation: rotate var(--ball-animation-duration) linear infinite forwards;
}



svg text {
	font-family: sans-serif;
	fill: white;
	font-weight: bold;
	dominant-baseline: middle;
	text-anchor: middle;
	font-size: 12px;
}

@keyframes countdown {
	from {
		stroke-dashoffset: 0px;
	}
	to {
		stroke-dashoffset: 113px;
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-360deg);
	}
}