h1{
	cursor: pointer;
}

.btns-grid{
	display: grid;
	grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  padding: 1rem .5rem;
  background-color: #00000036;
  border-radius: 15px;
}

 	.btn{
	border: 2px solid white;
	}

	.btns-grid > :nth-child(5n+3){
    display: none;
    }

    .btns-grid > :nth-child(-n+3){
    display: none
    }

	.btns-grid > :nth-child(1){
	   	background-color: #9bff48;
  	}

    .btns-grid > :nth-child(2){
	   	background-color: #9bff48;
  	}

    .btns-grid > :nth-child(3){
	   	background-color: #9bff48;
  	}

    .btns-grid > :nth-child(4){
	   	background-color: violet;
  	}

	 .btns-grid > :nth-child(5){
	   	display: none;
  	}

    .btns-grid > :nth-child(6){
	   	background-color: #9bff48;
  	}

  	.btns-grid > :nth-child(7){
  		background-color: gray;
  	}

  	.btns-grid > :nth-child(8){
  		background-color: #9b44ff;
  	}

  	.btns-grid > :nth-child(9){
  		background-color: #ff48;
  	}

  	.btns-grid > :nth-child(10){
  		background-color: gray;
  	}

  	.btns-grid > :nth-child(11){
  		background-color: gray;
	  }

  	.btns-grid > :nth-child(12){
  		background-color: #ff9d47;
  	}

  	.btns-grid > :nth-child(13){
  		background-color: lime;
  	}

  	.btns-grid > :nth-child(14){
  		background-color: gray;
  	}

  	.btns-grid > :nth-child(15){
  		background-color: lightcyan;
  	}

  	.btns-grid > :nth-child(16){
  		background-color: lightpink;
  	}

  	.btns-grid > :nth-child(17){
  		background-color: lightgreen;
  	}

  	.btns-grid > :nth-child(18){
  		background-color: lightsalmon;
  	}

  	.btns-grid > :nth-child(19){
  		background-color: lightseagreen;
  	}

  	.btns-grid > :nth-child(20){
  		background-color: lightsteelblue;
  	}

  	.btns-grid > :nth-child(21){
  		background-color: lightyellow;
  	}

  	.btns-grid > :nth-child(22){
  		background-color: gray;
  	}

  	.btns-grid > :nth-child(23){
  		background-color: lightcoral;
  	}
	
  	.btns-grid > :nth-child(24){
  		background-color: gray;
  	}
	
  	.btns-grid > :nth-child(25){
  		background-color: lightcoral;
  	}
	
  	.btns-grid > :nth-child(26){
  		background-color: gray;
  	}
	
  	.btns-grid > :nth-child(27){
  		background-color: gray;
  	}
	
  	.btns-grid > :nth-child(28){
  		background-color: lightcoral;
  	}
	
  	.btns-grid > :nth-child(29){
  		background-color: lightsalmon;
  	}
	
  	.btns-grid > :nth-child(30){
  		background-color: gray;
  	}

.user-grid{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	column-gap: 1rem;
	row-gap: 1rem;
	padding: 10px;
	min-height: 500px;
}

  .user{
	border-radius: 15px;
	text-align: center;
	align-content: center;
	border: 18px black;
	padding: 50px;
	cursor: pointer;
  }

  .unuser{
  	border-radius: 15px;
	text-align: center;
	align-content: center;
	border: 18px black;
	padding: 50px;
	cursor: pointer;
  }

  	.gif{
  		background-image: url(../imagenes/nobody.gif);
  		background-size: cover;
  		background-position: center top;
  		background-repeat: no-repeat;
  		height: 100%;
  	}

  .empty{
  	border-radius: 15px;
	text-align: center;
	align-content: center;
	border: 18px black;
	padding: 50px;
}

    .user-grid > :nth-child(5n+3){
		background-color: transparent !important;
		color: transparent !important;
    }

    .user-grid > :nth-child(-n+3){
    background-color: transparent !important;
    color: transparent !important;;
    }

    .user-grid > :nth-child(1){
	   	background-color: #9bff48;
  	}

    .user-grid > :nth-child(2){
	   	background-color: #9bff48;
  	}

    .user-grid > :nth-child(3){
	   	background-color: #9bff48;
  	}

    .user-grid > :nth-child(4){
	   	background-color: violet;
      width: 206%;
  	}

  		.salto-profesor {
  			 animation: saltEspectacular 1s ease-in-out;
		}

			@keyframes saltEspectacular {
			    0% {
			        transform: translateY(0) rotate(0) scale(1);
			    }

			    15% {
			        transform: translateY(10px) scale(1.15, 0.75);
			    }

			    35% {
			        transform: translateY(-150px) rotate(-15deg) scale(1.1);
			    }

			    50% {
			        transform: translateY(-180px) rotate(15deg) scale(1.15);
			    }

			    65% {
			        transform: translateY(-100px) rotate(-10deg) scale(1.05);
			    }

			    80% {
			        transform: translateY(0) rotate(8deg) scale(1.2, 0.8);
			    }

			    90% {
			        transform: translateY(-25px) rotate(-5deg) scale(1.05);
			    }

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

	 .user-grid > :nth-child(5){
	   	background-color: transparent;
     color: transparent;
  	}

    .user-grid > :nth-child(6){
	   	background-color: #9bff48;
  	}

  		.salto-alejandro{
  		animation: jesseanimation 1s linear;
  		}

  		@keyframes jesseanimation{
  			0%{
  				clip-path: polygon(50% 0%, 100% 0%, 100% 33%, 100% 66%, 100% 100%, 50% 100%, 0% 100%, 0% 66%, 0% 33%, 0% 0%);
  			}
  			20%{
  				clip-path: polygon(50% 0%, 100% 0%, 100% 33%, 100% 66%, 100% 100%, 50% 100%, 0% 100%, 0% 66%, 0% 33%, 0% 0%);
 				transform: scale(150%) translateY(-150px) rotate(-15deg);		
  			}
  			25%{
				clip-path: polygon(50% 0%, 100% 0%, 100% 33%, 100% 66%, 100% 100%, 50% 100%, 0% 100%, 0% 66%, 0% 33%, 0% 0%);
				border-radius: 100%;
				background-color: lightgrey;
  			}
  			50%{
  				clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  				background-color: lightblue;
  			}
  			75%{
  				clip-path: polygon(50% 0%, 68% 13%, 100% 35%, 90.82% 65.26%, 79% 100%, 51.89% 99.03%, 21% 100%, 9.99% 65.06%, 0% 35%, 26.42% 15.65%);
  				background-color: lightpink;
  			}
  			80%{
  				clip-path: polygon(50% 0%, 68% 13%, 100% 35%, 90.82% 65.26%, 79% 100%, 51.89% 99.03%, 21% 100%, 9.99% 65.06%, 0% 35%, 26.42% 15.65%);
  				transform: scale(100%);
  			}
  			100%{
  				clip-path: polygon(50% 0%, 100% 0%, 100% 33%, 100% 66%, 100% 100%, 50% 100%, 0% 100%, 0% 66%, 0% 33%, 0% 0%);
  				border-radius: 15px;
  				
  			}
  		}

  	.user-grid > :nth-child(7){
  		background-color: gray;
  	}

  	.user-grid > :nth-child(8){
  		background-color: #9b44ff;
  	}

  	.user-grid > :nth-child(9){
  		background-color: #ff48;
  	}

  		.jash{
			cursor: pointer;
			animation-name: saltoGrid;
		  	animation-duration: 0.7s;
		  	border-radius: 20px;
		  	/*animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);*/
		  	
		  	text-align: center;
		}



		@keyframes saltoGrid {
		  0% {
		    transform: translateY(0) translateX(0) scale(1);
		  }
		  30% {
		    /* Salta hacia arriba (Y negativo), se desplaza un poco en X y crece ligeramente */
		    transform: translateY(-30px) translateX(4px) scale(1.06);
		    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.25); /* Sombra dinámica en el aire */
		    border-radius: 100%;
		  }
		  50% {
		    /* Impacto de rebote: se aplasta un poquito al tocar el suelo */
		    transform: translateY(0) translateX(0) scale(1.1, 0.9);
		    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
		  }
		  75% {
		    /* Segundo mini-rebote hacia arriba */
		    transform: translateY(-12px) translateX(-2px) scale(1.02);
		    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
		    border-radius: 15px;
		  }
		  100% {
		    /* Vuelve a la normalidad */
		    transform: translateY(0) translateX(0) scale(1);
		    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		  }
		}

  	.user-grid > :nth-child(10){
  		background-color: gray;
  	}

  	.user-grid > :nth-child(11){
  		background-color: gray;
	  }

  	.user-grid > :nth-child(12){
  		background-color: #ff9d47;
  	}

  	.user-grid > :nth-child(13){
  		background-color: lime;
  	}

  	.user-grid > :nth-child(14){
  		background-color: gray;
  	}

  	.user-grid > :nth-child(15){
  		background-color: lightcyan;
  	}

  		.explosion {
     		 animation: efectoExplosion 0.8s ease-out forwards;
   			 position: relative;
   			 z-index: 999; 
   			}


  		@keyframes efectoExplosion {
		    0% {
		        transform: scale(1);
		        filter: brightness(1);
		        opacity: 1;
		    }
		       30% {
		        transform: scale(1.1);
		        filter: brightness(2.5);
		        box-shadow: 0 0 25px #ffffff, 0 0 50px #ffeb3b;
		        opacity: 1;
		    }
		      50% {
		        transform: scale(1.3) rotate(5deg);
		        filter: brightness(3);
		        box-shadow: 0 0 40px #ffeb3b, 0 0 80px #ff5722;
		    }
		    70% {
		        transform: scale(1.4) rotate(-5deg);
		        filter: brightness(3.5);
		        box-shadow: 0 0 60px #ff5722, 0 0 100px #ff0000;
		        opacity: 0.9;
		    }
		       100% {
		        transform: scale(3);
		        filter: brightness(5) blur(15px);
		        box-shadow: 0 0 120px #ff0000;
		        opacity: 0;
		    }
		}


  	.user-grid > :nth-child(16){
  		background-color: lightpink;
  	}

  		.carmeloanimation{
  			animation: latido 2s ease-in-out;
  		}

  		@keyframes latido {
		    0%   { transform: scale(1); }
		    50%  { transform: scale(1.15); background-color: gold; }
		    100% { transform: scale(1); }
		}
		
  	.user-grid > :nth-child(17){
  		background-color: lightgreen;
  	}

  	.user-grid > :nth-child(18){
  		background-color: lightsalmon;
  	}

  	.user-grid > :nth-child(19){
  		background-color: lightseagreen;
  	}

	  	.alexandraanimation {
	    position: relative;
	    z-index: 100;
	    transform-origin: center;
	    border: 3px solid white !important;
	    border-radius: 15px !important;
	    font-weight: 900 !important;
	    animation: alexandra-ultra 3s ease-in-out both;
		}

		@keyframes alexandra-ultra {

		    /* INICIO: calma antes de la tormenta */
		    0% {
		        transform: scale(1) rotate(0deg);
		        background: #dbeafe;
		        color: #111827;
		        box-shadow: none;
		        filter: brightness(1);
		        text-shadow: none;
		    }

		    /* CARGA DE ENERGÍA */
		    5% {
		        transform: scale(0.7) rotate(-12deg);
		        background: #9400ff;
		        color: white;
		        box-shadow: 0 0 30px #9400ff;
		        filter: brightness(1.8);
		    }

		    /* PRIMER ESTALLIDO */
		    12% {
		        transform: scale(1.6) rotate(12deg);
		        background: #ff00e6;
		        color: white;
		        box-shadow:
		            0 0 10px white,
		            0 0 30px #ff00e6,
		            0 0 60px #ff00e6,
		            0 0 100px #9400ff;
		        text-shadow: 0 0 15px white;
		        filter: brightness(2);
		    }

		    /* VIBRACIÓN SALVAJE */
		    20% {
		        transform: scale(1.35) rotate(-15deg) skew(-8deg);
		        background: #00eaff;
		        color: #111;
		        box-shadow:
		            0 0 25px #00eaff,
		            0 0 60px #00eaff,
		            0 0 100px white;
		        filter: hue-rotate(60deg) brightness(1.8);
		    }

		    /* EXPLOSIÓN MORADA */
		    30% {
		        transform: scale(1.8) rotate(15deg);
		        background: #7b00ff;
		        color: white;
		        box-shadow:
		            0 0 20px white,
		            0 0 50px #9400ff,
		            0 0 90px #ff00e6,
		            0 0 130px #9400ff;
		        text-shadow: 0 0 20px #fff;
		        filter: brightness(2.2) saturate(2);
		    }

		    /* SOBRECARGA NEÓN */
		    42% {
		        transform: scale(1.45) rotate(-12deg) skew(8deg);
		        background: #39ff14;
		        color: #111;
		        box-shadow:
		            0 0 25px #39ff14,
		            0 0 60px #39ff14,
		            0 0 100px #00eaff;
		        filter: hue-rotate(120deg) brightness(2);
		    }

		    /* MODO FURIA */
		    55% {
		        transform: scale(2) rotate(10deg);
		        background: #ff1744;
		        color: white;
		        box-shadow:
		            0 0 20px white,
		            0 0 50px #ff1744,
		            0 0 90px #ff4500,
		            0 0 140px #ff00e6;
		        text-shadow: 0 0 15px white;
		        filter: brightness(2.3) saturate(2.5);
		    }

		    /* DESCARGA ELÉCTRICA */
		    65% {
		        transform: scale(1.5) rotate(-16deg) skew(-10deg);
		        background: #fff000;
		        color: #111;
		        box-shadow:
		            0 0 30px #fff,
		            0 0 60px #fff000,
		            0 0 100px #ff9100;
		        filter: hue-rotate(200deg) brightness(2);
		    }

		    /* GOLPE FINAL */
		    77% {
		        transform: scale(1.9) rotate(8deg);
		        background: #ff00e6;
		        color: white;
		        box-shadow:
		            0 0 30px white,
		            0 0 60px #ff00e6,
		            0 0 100px #9400ff,
		            0 0 150px #00eaff;
		        text-shadow: 0 0 20px white;
		        filter: brightness(2.5) saturate(3);
		    }

		    /* REBOTE */
		    88% {
		        transform: scale(1.25) rotate(-5deg);
		        background: #00eaff;
		        color: #111;
		        box-shadow:
		            0 0 25px #00eaff,
		            0 0 55px #ff00e6;
		        filter: brightness(1.5);
		    }

		    /* REGRESO A LA NORMALIDAD */
		    96% {
		        transform: scale(1.08) rotate(2deg);
		        background: #dbeafe;
		        color: #111827;
		        box-shadow: 0 0 15px #9400ff;
		        filter: brightness(1.1);
		        text-shadow: none;
		    }

		    100% {
		        transform: scale(1) rotate(0deg) skew(0deg);
		        /*background: #dbeafe;*/
		        /*color: #111827;*/
		        box-shadow: none;
		        filter: brightness(1);
		        text-shadow: none;
		    }
		}


  	.user-grid > :nth-child(20){
  		background-color: lightsteelblue;
  	}

  	.user-grid > :nth-child(21){
  		background-color: lightyellow;
  	}

  		.marcGradient {
		    background: linear-gradient( 135deg, #004D98, #A50044, #ED1C24, #A50044, #004D98);
		    background-size: 300% 300%;
		    /* Dues animacions simultànies */
		    animation: marcGradient 5s ease, marcMoviment 1s linear;
		    transform-origin: center;
		}

			/* Animació del gradient */
			@keyframes marcGradient {
			    0% {
			        background-position: 0% 50%;
			    }
			    25% {
			        background-position: 50% 100%;
			    }
			    50% {
			        background-position: 100% 50%;
			    }
			    75% {
			        background-position: 50% 0%;
			    }
			    100% {
			        background-position: 0% 50%;
			    }
			}

			/* Animació del moviment */
			@keyframes marcMoviment {
			    0% {
			        transform: translateX(0) rotate(0deg);
			    }
			    25% {
			        transform: translateX(15px) rotate(4deg);
			    }
			    50% {
			        transform: translateX(0) rotate(0deg);
			    }
			    75% {
			        transform: translateX(-15px) rotate(-4deg);
			    }
			    100% {
			        transform: translateX(0) rotate(0deg);
			    }
			}


  	.user-grid > :nth-child(22){
  		background-color: gray;
  	}

  	.user-grid > :nth-child(23){
  		background-color: lightcoral;
  	}
	
  	.user-grid > :nth-child(24){
  		background-color: gray;
  	}
	
  	.user-grid > :nth-child(25){
  		background-color: lightcoral;
  	}
				  		/* ==========================================
				   HECTOR: ESTAT INICIAL I ANIMACIÓ PRINCIPAL
				   ========================================== */

				#hector {
				    position: relative;
				    isolation: isolate;
				    overflow: visible;

				    opacity: 1;
				    filter: none;
				    transform: none;

				    background-color: darkorchid;

				    display: flex;
				    align-items: center;
				    justify-content: center;
				}

				#hector.hector-actiu {
				    animation: hector-appear 2.2s
				        cubic-bezier(0.16, 1, 0.3, 1) forwards;
				}


				/* ==========================================
				   APARICIÓ: GRIS -> COLOR I OPACITAT
				   ========================================== */

				@keyframes hector-appear {
				    0% {
				        opacity: 0.15;
				        filter: grayscale(100%) blur(5px);
				        transform: translateY(22px) scale(0.93);
				        box-shadow: 0 0 0 rgba(90, 210, 255, 0);
				    }

				    45% {
				        opacity: 0.7;
				        filter: grayscale(40%) blur(1px);
				        transform: translateY(-3px) scale(1.02);
				        box-shadow: 0 0 22px rgba(90, 210, 255, 0.2);
				    }

				    100% {
				        opacity: 1;
				        filter: grayscale(0%) blur(0);
				        transform: translateY(0) scale(1);
				        box-shadow: 0 0 18px rgba(90, 210, 255, 0.3);
				    }
				}


				/* ==========================================
				   MOVIMENT AMBIENT: PETIT EFECTE FLOTANT
				   ========================================== */

				@keyframes hector-float {
				    0%, 100% {
				        transform: translateY(0);
				    }

				    50% {
				        transform: translateY(-3px);
				    }
				}


				/* ==========================================
				   ESPURNES D'ENERGIA
				   ========================================== */

				#hector .hector-sparks {
				    position: absolute;
				    inset: 0;
				    z-index: 10;
				    pointer-events: none;
				    overflow: visible;
				}

				#hector .hector-sparks span {
				    position: absolute;
				    left: 50%;
				    top: 50%;

				    display: block;
				    width: 5px;
				    height: 5px;
				    border-radius: 50%;

				    background: #ffffff;
				    box-shadow:
				        0 0 6px #ffffff,
				        0 0 12px #00eaff,
				        0 0 20px #00eaff;

				    opacity: 0;
				    transform: translate(-50%, -50%);
				}

				/* Trajectòries de les vuit espurnes */

				#hector .hector-sparks span:nth-child(1) {
				    --x: -180px;
				    --y: -120px;
				    --delay: 0s;
				}

				#hector .hector-sparks span:nth-child(2) {
				    --x: 160px;
				    --y: -150px;
				    --delay: 0.3s;
				    background: #fff6a0;
				    box-shadow: 0 0 8px #fff, 0 0 18px #ffd700;
				}

				#hector .hector-sparks span:nth-child(3) {
				    --x: -220px;
				    --y: 30px;
				    --delay: 0.6s;
				}

				#hector .hector-sparks span:nth-child(4) {
				    --x: 210px;
				    --y: 100px;
				    --delay: 0.9s;
				    background: #fff6a0;
				    box-shadow: 0 0 8px #fff, 0 0 18px #ffd700;
				}

				#hector .hector-sparks span:nth-child(5) {
				    --x: -100px;
				    --y: 180px;
				    --delay: 0.4s;
				}

				#hector .hector-sparks span:nth-child(6) {
				    --x: 100px;
				    --y: -200px;
				    --delay: 0.7s;
				}

				#hector .hector-sparks span:nth-child(7) {
				    --x: -250px;
				    --y: -80px;
				    --delay: 1s;
				}

				#hector .hector-sparks span:nth-child(8) {
				    --x: 250px;
				    --y: -30px;
				    --delay: 0.5s;
				}

				/* Activació en passar el ratolí */

				#hector.hector-actiu .hector-sparks span {
				    animation: hector-spark 2.4s ease-out var(--delay) 1;
				}

				@keyframes hector-spark {
				    0% {
				        opacity: 0;
				        transform: translate(-50%, -50%) scale(0.2);
				    }

				    10% {
				        opacity: 1;
				        transform: translate(-50%, -50%) scale(1.8);
				    }

				    100% {
				        opacity: 0;
				        transform: translate(
				            calc(-50% + var(--x)),
				            calc(-50% + var(--y))
				        ) scale(0.3);
				    }
				}


				/* ==========================================
				   TEXT: SEMPRE PER SOBRE DE LES ESPURNES
				   ========================================== */

				#hector .hector-content {
				    position: relative;
				    z-index: 2;
				}


				/* ==========================================
				   ACCESSIBILITAT: MENYS MOVIMENT
				   ========================================== */

				@media (prefers-reduced-motion: reduce) {
				    #hector,
				    #hector .hector-sparks span {
				        animation: none;
				    }

				    #hector {
				        opacity: 1;
				        filter: none;
				        transform: none;
				    }

				    #hector .hector-sparks span {
				        opacity: 0;
				    }
				}


  	}
	
  	.user-grid > :nth-child(26){
  		background-color: gray;
  	}
	
  	.user-grid > :nth-child(27){
  		background-color: gray;
  	}
	
  	.user-grid > :nth-child(28){
  		background-color: lightcoral;
  	}
	
  	.user-grid > :nth-child(29){
  		background-color: lightsalmon;
  	}
	
  	.user-grid > :nth-child(30){
  		background-color: gray;
  	}