.floating-astronaut {
  position: absolute;

  left: var(--astro-x);
  top: var(--astro-y);

  width: 400px;
  height: auto;

  pointer-events: none;
  user-select: none;

  z-index: 2;

  animation: astronaut-float
	var(--float-duration)
	ease-in-out
	infinite;

  will-change: transform;
}

@keyframes astronaut-float {
  0% {
	transform:
	  translate(-50%, -50%)
	  rotate(calc(var(--rotate) - 3deg));
  }

  25% {
	transform:
	  translate(calc(-50% + 8px), calc(-50% - 12px))
	  rotate(calc(var(--rotate) + 2deg));
  }

  50% {
	transform:
	  translate(calc(-50% - 4px), calc(-50% - 20px))
	  rotate(calc(var(--rotate) + 5deg));
  }

  75% {
	transform:
	  translate(calc(-50% - 10px), calc(-50% - 8px))
	  rotate(calc(var(--rotate) + 1deg));
  }

  100% {
	transform:
	  translate(-50%, -50%)
	  rotate(calc(var(--rotate) - 3deg));
  }
}

#space-background {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;

  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

#space-background svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* PALETTE COLORI
   1. #0457ac (Blu scuro)
   2. #308fac (Azzurro/Ciano)
   3. #37bd79 (Verde smeraldo)
   4. #a7e237 (Verde lime)
   5. #f4e604 (Giallo acceso)
*/

body {
	font-family: 'Plus Jakarta Sans', sans-serif;
	background-color: #0457ac; /* Sfondo principale in Blu Scuro */
	color: #ffffff;
	min-height: 100vh;
}

/* --- CARD CUSTOM --- */
.card-custom {
	border: none;
	border-radius: 20px;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	background-color: #ffffff;
	color: #1a202c;
}

.card-custom:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
}

/* --- STILI PER LE BARRE DI PROGRESSO --- */
.progress-segmented {
	gap: 3px;
	background-color: #fff;
}

.segment {
	flex: 1;
	height: 32px;
	background-color: #e2e8f0;
	position: relative;
	overflow: hidden;
}

.segment:first-child {
	border-radius: 10px 0px 0px 10px;
}
.segment:last-child {
	border-radius: 0px 10px 10px 0px;
}

.segment img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	pointer-events: none;
	z-index: 10;
}

.progress-icon {
	width: 75px !important;
	height: 75px !important;
}

.small-icon.progress-icon {
	width: 50px !important;
	height: 50px !important;
}

.lunch-icon {
	width: 75px !important;
	height: 75px !important;
}

.coffee-icon {
	left: 0% !important;
}

.grayscale {
	filter: grayscale(100%);
}

.segment-fill {
	height: 100%;
	width: 0%;
	transition: width 0.4s ease-in-out;
}

.azure-gradient {
	background: #00fff0;
	background: -webkit-linear-gradient(315deg, #0083fe, #00fff0);
	background: linear-gradient(315deg, #0083fe, #00fff0);
}

.yellow-gradient {
	background: #F7971E;
	background: -webkit-linear-gradient(135deg, #FFD200, #F7971E);
	background: linear-gradient(135deg, #FFD200 25%, #F7971E 100%);
}

.limegreen-gradient {
	background: #56ab2f;  /* fallback for old browsers */
	background: -webkit-linear-gradient(135deg, #a8e063, #56ab2f);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(135deg, #a8e063, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.green-gradient {
	background: #81ff8a;
	background: -webkit-linear-gradient(315deg, #64965e, #81ff8a);
	background: linear-gradient(315deg, #64965e, #81ff8a);
}

.pink-gradient {
	background: #FC5C7D;
	background: -webkit-linear-gradient(315deg, #6A82FB, #FC5C7D);
	background: linear-gradient(315deg, #6A82FB, #FC5C7D);
}

.spotify-gradient {
	background: #BC10F4;
	background: linear-gradient(315deg, rgba(188, 16, 244, 1) 0%, rgba(39, 57, 253, 1) 50%, rgba(40, 213, 214, 1) 100%);
}

.space-gradient {
	background: radial-gradient(
	circle at 20% 20%,
	#3b1d78 0%,
	transparent 35%
  ),
  radial-gradient(
	circle at 80% 30%,
	#162d68 0%,
	transparent 35%
  ),
  radial-gradient(
	circle at 50% 90%,
	#40185f 0%,
	transparent 40%
  ),
  linear-gradient(
	135deg,
	#050510 0%,
	#0b0b24 45%,
	#110b2d 100%
  );
}

.box-icon {
	top: -25px;
	right: -10px;
	width: 50px;
	height: 50px;
}

/* --- PULSANTE IMPOSTAZIONI --- */
.settings-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: rgba(4, 87, 172, 0.08);
	color: #0457ac;
	font-size: 1.2rem;
	text-decoration: none;
	transition: all 0.2s ease;
}

.settings-btn:hover {
	background: rgba(4, 87, 172, 0.16);
	color: #0457ac;
	transform: rotate(45deg);
}

@media (max-width: 991.98px) {
	.small-icon.progress-icon {
		width: 20px !important;
		height: 20px !important;
	}
}