@font-face {
            font-family: 'Stepalange';
            src: url('media/Fonts/Stepalange-x3BLm.otf') format('opentype');
        }

        body {
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #47aba9;
            color: white;
            font-family: Stepalange, sans-serif;
            user-select: none;
            touch-action: none; /* disabilita gesture del browser */
        }

        h1 {
            margin-bottom: 20px;
            text-align: center;
        }

	#start-btn {
    		font-size: 1.5rem;
    		font-family: Stepalange, sans-serif;
    		padding: 15px 30px 30px 30px;
    		border: none;
    		border-radius: 0;
    		background-color: transparent;
            background-image: url("media/UI/Button_Blue_3Slides.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            color: white;
            cursor: pointer;
            z-index: 10;
    		min-width: 250px;
    		min-height: 80px;
    		display: flex;
    		align-items: center;
    		justify-content: center;
	}
    #start-btn.pressed {
            background-image: url("media/UI/Button_Blue_3Slides_Pressed.png");  
        }

        #start-screen {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
        }

        #loader {
            display: none;
            align-items: center;
            gap: 10px;
            color: #bbb;
            font-size: 0.95rem;
        }

        #loader .spinner {
            width: 24px;
            height: 24px;
            border: 3px solid #555;
            border-top-color: #fff;
            border-radius: 0;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        #joystick-zone {
            width: 40vw;       /* 40% della larghezza viewport */
            height: 40vw;      /* proporzioni quadrate */
            max-width: 40vw;  /* limite dimensioni */
            max-height: 40vw;
            background-color: transparent;
            border-radius: 0;
            position: absolute;
	    left: 2%;
	    top: 50%;
	    transform: translateY(-50%);
            z-index: 6;
        }

        /* --- NippleJS custom skin (joystick sinistro) --- */
        #joystick-zone .nipple {
            opacity: 1;
        }

        #joystick-zone .nipple .front {
            background: transparent url("media/UI/Button_Blue.png") no-repeat center / 100% 100% !important;
            border-radius: 0 !important;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            opacity: 1 !important;
            visibility: visible !important;
            display: block;
        }

        #joystick-zone .nipple .back {
            background: transparent url("media/UI/Button_Blue_9Slides_Pressed.png") no-repeat center / 100% 100% !important;
            border-radius: 0 !important;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            opacity: 1 !important;
            visibility: visible !important;
            display: block;
        }

        .character-image {
            image-rendering: pixelated;
            image-rendering: crisp-edges;
        }

        #character-select {
            padding: 10px 20px;
            overflow: hidden;
        }

        #character-select h2 {
            margin: 10px 0;
            font-size: clamp(1rem, 5vw, 1.5rem);
        }

        #character-select > div {
            max-height: calc(100vh - 120px);
            gap: clamp(20px, 5vw, 40px) !important;
        }

        .character-slot {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            max-height: 60vh;
        }

        .character-slot .character-image {
            width: auto;
            height: auto;
            max-height: 30vh;
            max-width: 30vw;
            object-fit: contain;
        }

        .character-slot span {
            margin-top: clamp(5px, 2vw, 10px);
            font-size: clamp(0.9rem, 4vw, 1.2rem);
            text-align: center;
        }

        #selected-character-img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 256px;
            height: 256px;
            max-width: 30vw;
            max-height: 30vw;
            pointer-events: none;
            z-index: 5;
        }


        #right-btn {
            position: absolute;
            right: 3vw;
            top: 50%;
            transform: translateY(-50%);
            width: 60vw;
            height: 60vw;
            max-width: 60vh;
            max-height: 60vh;
            border-radius: 0;
            font-size: 0;
            background-color: transparent;
            background-image: url("media/UI/SmallRedRoundButton_Regular.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            border: none;
            z-index: 10;
            touch-action: none;
            display: none;
        }

        #right-btn.pressed {
            background-image: url("media/UI/SmallRedRoundButton_Pressed.png");
        }

        #status {
            margin-top: 20px;
            font-size: 0.9rem;
            min-height: 1.1rem;
        }

	/* media query per device verticale */	/* Schermata di morte */
	#dead-screen {
		display: none !important;
		background-color: #47aba9;
	}

	#dead-screen.show {
		display: flex !important;
	}

	#respawn-btn {
		font-size: 1.5rem;
		font-family: Stepalange, sans-serif;
		padding: 15px 30px 30px 30px;
		border: none;
		border-radius: 0;
		background-color: transparent;
		background-image: url("media/UI/Button_Blue_3Slides.png");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		image-rendering: pixelated;
		image-rendering: crisp-edges;
		color: white;
		cursor: pointer;
		z-index: 10;
		min-width: 250px;
		min-height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#respawn-btn.pressed {
		background-image: url("media/UI/Button_Blue_3Slides_Pressed.png");
	}

	/* Effetto shake dello schermo */
	@keyframes shake {
		0%, 100% { transform: translate(0, 0); }
		10% { transform: translate(-5px, -5px); }
		20% { transform: translate(5px, 5px); }
		30% { transform: translate(-5px, 5px); }
		40% { transform: translate(5px, -5px); }
		50% { transform: translate(-3px, -3px); }
		60% { transform: translate(3px, 3px); }
		70% { transform: translate(-3px, 3px); }
		80% { transform: translate(3px, -3px); }
		90% { transform: translate(-2px, -2px); }
	}

	body.shake {
		animation: shake 0.3s;
	}

	/* Overlay flash rosso */
	#red-flash-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #ff0000;
		opacity: 0;
		pointer-events: none;
		z-index: 999;
		transition: none;
	}

	#red-flash-overlay.active {
		opacity: 1;
	}
	/* Scritte lampeggianti */
	.hint-text {
		position: fixed;
		font-size: 1rem;
		color: white;
		font-family: Stepalange, sans-serif;
		z-index: 8;
		display: none;
		opacity: 0;
		animation: blink 0.6s infinite;
	}

	#hint-left {
		top: 20px;
		left: 20px;
	}

	#hint-right {
		top: 20px;
		right: 20px;
		text-align: right;
	}

	.hint-text.show {
		display: block;
	}

	@keyframes blink {
		0%, 49% { opacity: 1; }
		50%, 100% { opacity: 0; }
	}
	@media screen and (orientation: portrait) {
   	body::before {
        	content: "Ruota il telefono in orizzontale";
        	display: flex;
        	justify-content: center;
        	align-items: center;
        	position: fixed;
        	top:0; left:0;
        	width:100vw;
        	height:100vh;
        	background-color:#47aba9;
        	color:white;
        	font-size: 1.5rem;
        	z-index: 1000;
    	}
    	body > * {
        	display: none; /* nasconde contenuto principale */
    	}
	}