@font-face {
	font-family: 'Unbounded';
	src: url('fonts/unbounded-regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Work Sans';
	src: url('fonts/worksans-regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
 
 body, html {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: fixed;
  /* Previeni il ridimensionamento e lo zoom */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Previeni il pinch zoom */
  -webkit-tap-highlight-color: transparent;
  /* Blocca le dimensioni */
  min-width: 100vw;
  max-width: 100vw;
  min-height: 100vh;
  max-height: 100vh;
}
 
 #game {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  border: 1px solid #ccc;
  overflow: hidden;
  /* Previeni il ridimensionamento */
  min-width: 100vw;
  max-width: 100vw;
  min-height: 100vh;
  max-height: 100vh;
}
 
 #world { 
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%;
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: 0;
 }
 
 .gauge {
  margin: 0;
  padding: 0;
  height: auto;
  width: auto;
  text-align: center;
  font-size: 1.6vw;
  font-weight: bold;
  position: absolute;
  bottom: 50vh;
  z-index: 1000;
 font-family: 'Unbounded', 'SMB', sans-serif;
 color: #DC4439; /* Hard */
 text-shadow: 
   -0.1vw -0.1vw 0 #000, 
   0.1vw -0.1vw 0 #000, 
   -0.1vw 0.1vw 0 #000, 
   0.1vw 0.1vw 0 #000;
}
 
 .gaugeSprite {
   margin: 0;
   padding: 0;
   z-index: 1000;
   position: absolute;
 }
 
 #coinNumber {
  left: 2vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05vw;
  min-width: fit-content;
  flex-shrink: 0;
}

.gauge-text-line {
  display: flex;
  align-items: baseline;
  gap: 0.3vw;
  order: 2;
}

 .gauge-label {
  font-size: 0.9em;
  letter-spacing: 0.05em;
  line-height: 1;
  flex-shrink: 0;
}

.gauge-value {
  flex-shrink: 0;
}
 
 #liveNumber {
  right: 2vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1vw;
  min-width: fit-content;
  flex-shrink: 0;
}

#liveNumber span {
  order: 2;
}
 
 #coin {
  height: 32px;
  width: 32px;
  background-image: url(mario-objects.png);
  background-position: 0 0;
  background-size: auto;
  transform: scale(1.2);
  transform-origin: center center;
  position: relative;
  order: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: hidden;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

 #live {
  height: 40px;
  width: 40px;
  background-image: url(mario-sprites.png);
  background-position: 0 -430px;
  background-size: auto;
  transform: scale(1.2);
  transform-origin: center center;
  position: relative;
  order: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: hidden;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.position-display {
  display: none; /* Nascondi il pannello della posizione */
}

/* Notifica quando ottiene il potere di sparare */
.power-up-notification {
  position: fixed;
  top: clamp(200px, 35vh, 350px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1002;
  background: rgba(250, 114, 104, 0.95);
  color: #fff;
  padding: clamp(12px, 1.6vw, 16px) clamp(18px, 2.4vw, 24px);
  border-radius: clamp(8px, 1.2vw, 12px);
  font-family: 'Unbounded', 'SMB', sans-serif;
  font-size: clamp(0.9rem, 1.4vw, 1.4rem);
  font-weight: bold;
  text-align: center;
  box-shadow: 0 clamp(2px, 0.4vw, 4px) clamp(10px, 2vw, 20px) rgba(0, 0, 0, 0.5);
  border: clamp(2px, 0.3vw, 3px) solid #DC4439;
  pointer-events: none;
  animation: powerUpNotification 3s ease-out forwards;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 12px);
}

.fire-flower-icon {
  display: inline-block;
  width: clamp(24px, 3.2vw, 32px);
  height: clamp(24px, 3.2vw, 32px);
  background-image: url('fiore.png');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.fire-flower-icon-small {
  display: inline-block;
  width: clamp(18px, 2.4vw, 24px);
  height: clamp(18px, 2.4vw, 24px);
  background-image: url('fiore.png');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin: 0 clamp(2px, 0.4vw, 4px);
}

@keyframes powerUpNotification {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  15% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  85% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
}

/* Titolo del gioco in alto al centro - dinamico */
#gameTitle {
  position: fixed;
  top: clamp(10px, 8vh, 100px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  font-family: 'Unbounded', 'SMB', sans-serif;
  font-size: clamp(0.8rem, 3vw, 3.5rem); /* Dinamico: min 0.8rem, max 3.5rem, scala con viewport */
  font-weight: bold;
  letter-spacing: clamp(0.5px, 0.2vw, 3px);
  color: #DC4439; /* Hard - salmone scuro */
  text-shadow: 
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, /* Bordo nero più sottile su mobile */
    0 1px 2px rgba(0, 0, 0, 0.3), 0 0 5px rgba(250, 114, 104, 0.5);
  pointer-events: none;
  white-space: nowrap;
}

 /* Titolo ancora più piccolo su schermi molto piccoli */
 @media screen and (max-height: 500px) {
   #gameTitle {
     font-size: 0.7rem !important;
     top: 5px !important;
   }
 }

 /* Dimensioni maggiori su mobile per titolo e gauge */
 @media screen and (max-width: 1024px) {
   #gameTitle {
     font-size: clamp(1rem, 3.5vw, 4rem) !important;
   }
   
   .gauge {
     font-size: 1.8vw !important;
   }
   
   .gauge-label {
     font-size: 0.95em !important;
   }
 }
 
 .figure {
   margin: 0;
   padding: 0;
   z-index: 99;
   position: absolute;
 }
 
 .matter {
   margin: 0;
   padding: 0;
   z-index: 95;
   position: absolute;
   width: 32px;
   height: 32px;
 }

/* --- Overlay generici (intro, quiz, video) --- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7); /* Sfondo scuro trasparente */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
  box-sizing: border-box;
}

.overlay.visible {
  display: flex;
}

.overlay-panel {
  background: #fff; /* Bianco, non colorato */
  border-radius: clamp(8px, 1.5vw, 16px);
  padding: clamp(16px, 3vw, 32px) clamp(18px, 3.5vw, 36px);
  max-width: clamp(300px, 90vw, 700px);
  max-height: 90vh;
  width: 100%;
  box-shadow: 0 clamp(9px, 1.8vw, 18px) clamp(20px, 4vw, 40px) rgba(0, 0, 0, 0.3);
  border: clamp(1px, 0.2vw, 2px) solid #fa7268; /* Primary standard - salmone */
  color: #000; /* Testo nero */
  text-align: center;
  font-family: 'Work Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  position: relative;
  z-index: 2001;
  pointer-events: auto;
  overflow-y: auto;
  box-sizing: border-box;
}

.overlay-panel.video-panel {
  max-width: 900px;
}

.overlay-title {
  margin-top: 0;
  margin-bottom: clamp(8px, 1.2vw, 12px);
  font-size: clamp(1.2rem, 2.5vw, 2.5rem);
  font-weight: bold;
  letter-spacing: clamp(0.5px, 0.15vw, 1.5px);
  color: #000; /* Testo nero */
  text-shadow: none;
  font-family: 'Unbounded', 'SMB', sans-serif;
}

.overlay-text {
  margin: clamp(4px, 0.6vw, 6px) 0;
  font-size: clamp(0.9rem, 1.5vw, 1.5rem);
  font-weight: 500;
  letter-spacing: clamp(0.2px, 0.03vw, 0.3px);
  line-height: 1.5;
  color: #000; /* Testo nero */
  font-family: 'Work Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.overlay-text.secondary {
  font-size: 1rem;
  opacity: 0.9;
}

.overlay-button {
  margin-top: clamp(10px, 1.6vw, 16px);
  padding: clamp(8px, 1vw, 10px) clamp(16px, 2.2vw, 22px);
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: 'Unbounded', 'SMB', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(0.9rem, 1.3vw, 1.3rem);
  letter-spacing: clamp(0.3px, 0.05vw, 0.5px);
  background: #fa7268; /* Primary standard */
  color: #fff;
  text-shadow: 0 clamp(1px, 0.2vw, 2px) 0 rgba(220, 68, 57, 0.5); /* Hard per ombra testo */
  box-shadow: 0 clamp(2px, 0.4vw, 4px) 0 #DC4439, 0 clamp(5px, 1vw, 10px) clamp(10px, 2vw, 20px) rgba(220, 68, 57, 0.4); /* Hard per ombra */
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
  position: relative;
  z-index: 2001;
  pointer-events: auto;
}

.overlay-button.small {
  padding: 10px 22px; /* Stesso padding degli altri bottoni */
  font-size: 1.3rem; /* Stessa dimensione font degli altri bottoni */
}

.overlay-button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #DC4439, 0 6px 12px rgba(220, 68, 57, 0.4);
  filter: brightness(0.95);
}

#quizOptions {
  margin-top: clamp(8px, 1.2vw, 12px);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vw, 8px);
  text-align: left;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.8vw, 8px);
  background: #fa7268; /* Salmone - Primary standard */
  padding: clamp(5px, 0.6vw, 6px) clamp(8px, 1vw, 10px);
  border-radius: clamp(6px, 0.8vw, 8px);
  border: clamp(1px, 0.1vw, 1px) solid #fa7268; /* Primary standard */
}

.quiz-option input[type="radio"] {
  accent-color: #000; /* Nero per la selezione */
}

.quiz-option span {
  font-size: clamp(0.9rem, 1.3vw, 1.3rem);
  color: #fff; /* Testo bianco su sfondo salmone */
  font-family: 'Work Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#quizVideo {
  width: 100%;
  max-height: 540px;
  border-radius: 12px;
  background: #000;
  margin-bottom: 12px;
}

/* Video finale a schermo intero */
.overlay.fullscreen-video .overlay-panel {
  max-width: 100vw !important;
  max-height: 100vh !important;
  width: 100vw !important;
  height: 100vh !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  border: none !important;
}

.overlay.fullscreen-video #quizVideo {
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  object-fit: contain;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}

.overlay.fullscreen-video #skipVideoBtn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 2002;
}

/* Schermo nero restart */
#restartScreen {
  background: #000;
}

#restartScreen .overlay-panel {
  background: #000 !important;
  border: none !important;
  max-width: 700px !important; /* Aumentato per contenere il logo più grande */
  width: 90% !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px !important;
}

/* Logo finale con effetto glow */
#jump-logo-fin {
  max-width: 600px; /* Più grande (da 450px a 600px) */
  width: auto;
  height: auto;
  margin: 0 auto 30px auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 20px rgba(250, 114, 104, 0.6)) 
          drop-shadow(0 0 40px rgba(250, 114, 104, 0.4))
          drop-shadow(0 0 60px rgba(250, 114, 104, 0.3));
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

#pillolaText {
  text-align: left;
  max-height: clamp(200px, 50vh, 500px);
  overflow-y: auto;
  padding: clamp(12px, 1.6vw, 16px);
  background: #fff; /* Bianco come gli altri pannelli */
  border: clamp(1px, 0.2vw, 2px) solid #fa7268; /* Bordo salmone */
  border-radius: clamp(6px, 0.8vw, 8px);
  margin: clamp(8px, 1.2vw, 12px) 0;
  color: #000; /* Testo nero come gli altri pannelli */
  line-height: 1.6;
  font-family: 'Work Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(0.85rem, 1.2vw, 1.1rem);
}

/* Overlay feedback risposta */
.overlay-panel.feedback-panel {
  max-width: 500px;
  padding: 40px 36px;
}

.feedback-text {
  font-size: clamp(1.5rem, 3.5vw, 3.5rem);
  font-weight: bold;
  color: #000; /* Testo nero */
  text-shadow: none;
  margin: 0;
  animation: feedbackPulse 0.5s ease-out;
}

.feedback-text.correct {
  color: #000; /* Testo nero */
  text-shadow: none;
}

.feedback-text.wrong {
  color: #000; /* Testo nero */
  text-shadow: none;
}

@keyframes feedbackPulse {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Marker visivo per i trigger del quiz */
.quiz-marker {
  z-index: 98 !important;
  transform-origin: center center;
}

/* Solo i trigger normali (non finali) hanno l'animazione glow */
.quiz-marker:not(.quiz-marker-final) {
  filter: drop-shadow(0 0 20px rgba(250, 114, 104, 1)) drop-shadow(0 0 35px rgba(250, 114, 104, 0.8));
  animation: quizMarkerGlow 1.2s ease-in-out infinite;
}

@keyframes quizMarkerPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 1));
  }
}

@keyframes quizMarkerGlow {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(250, 114, 104, 0.5)) 
            drop-shadow(0 0 20px rgba(250, 114, 104, 0.3))
            drop-shadow(0 0 30px rgba(250, 114, 104, 0.2));
    opacity: 0.95;
    transform: scale(1);
  }
  25% {
    filter: drop-shadow(0 0 20px rgba(250, 114, 104, 0.8)) 
            drop-shadow(0 0 40px rgba(250, 114, 104, 0.6))
            drop-shadow(0 0 60px rgba(250, 114, 104, 0.4));
    opacity: 1;
    transform: scale(1.05);
  }
  50% {
    filter: drop-shadow(0 0 30px rgba(250, 114, 104, 1)) 
            drop-shadow(0 0 60px rgba(250, 114, 104, 0.9))
            drop-shadow(0 0 90px rgba(250, 114, 104, 0.7))
            drop-shadow(0 0 120px rgba(255, 50, 36, 0.5));
    opacity: 1;
    transform: scale(1.1);
  }
  75% {
    filter: drop-shadow(0 0 20px rgba(250, 114, 104, 0.8)) 
            drop-shadow(0 0 40px rgba(250, 114, 104, 0.6))
            drop-shadow(0 0 60px rgba(250, 114, 104, 0.4));
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Animazione freccia su e giù */
@keyframes arrowBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

  /* Controlli touch per mobile - nascosti di default */
  .touch-controls {
    display: none !important;
    position: fixed;
    bottom: clamp(15px, 3vh, 25px);
    left: 0;
    right: 0;
    z-index: 10000; /* Z-index molto alto per essere sopra tutto */
    pointer-events: none;
    padding: 0 clamp(10px, 2vw, 20px);
    box-sizing: border-box;
    visibility: hidden;
  }

 /* Su desktop, assicurati che siano sempre nascosti */
 @media screen and (min-width: 1025px) {
   .touch-controls,
   #touchControls {
     display: none !important;
     visibility: hidden !important;
   }
 }

.touch-controls-left,
.touch-controls-right {
  display: flex;
  gap: clamp(6px, 1vw, 10px);
  pointer-events: auto;
}

 .touch-controls-left {
   position: absolute;
   left: clamp(10px, 2vw, 20px);
   bottom: clamp(30px, 3vh, 30px);
 }

 .touch-controls-right {
   position: absolute;
   right: clamp(10px, 2vw, 20px);
   bottom: clamp(30px, 3vh, 30px);
 }

 .touch-button {
   width: clamp(45px, 7vw, 55px);
   height: clamp(45px, 7vw, 55px);
   border-radius: 50%;
   border: clamp(2px, 0.3vw, 3px) solid #fff;
   background: rgba(250, 114, 104, 0.95) !important; /* Più opaco per essere visibile */
   color: #fff !important;
   font-size: clamp(1.2rem, 1.5vw, 1.6rem);
   font-weight: bold;
   font-family: 'Unbounded', sans-serif;
   display: flex !important;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
   box-shadow: 0 clamp(2px, 0.4vw, 4px) clamp(5px, 1vw, 10px) rgba(0, 0, 0, 0.5) !important;
   transition: transform 0.1s, background 0.1s;
   opacity: 1 !important;
   visibility: visible !important;
 }

 .touch-button:active {
   transform: scale(0.9);
   background: rgba(220, 68, 57, 0.95);
 }

 .touch-button-jump {
   font-size: clamp(1.4rem, 1.7vw, 1.8rem);
 }

 .touch-button-accelerate {
   font-size: clamp(1.1rem, 1.3vw, 1.4rem);
 }

/* Forza landscape su mobile */
@media screen and (max-width: 1024px) and (orientation: portrait) {
  #mobileWarning {
    display: flex !important;
    visibility: visible !important;
    z-index: 10000 !important;
  }
  
  #mobileWarning.overlay {
    display: flex !important;
  }
  
  #game {
    display: none !important;
  }
}

 /* Mostra controlli touch su dispositivi touch in landscape */
 @media screen and (max-width: 900px) and (orientation: landscape),
        screen and (max-width: 900px) and (pointer: coarse) {
   #mobileWarning {
     display: none !important;
   }
   
   #touchControls,
   .touch-controls {
     display: block !important;
     visibility: visible !important;
   }

   /* Riduci zoom del gioco su mobile */
   #game {
     transform: scale(0.95);
     transform-origin: top left;
   }
   
   /* Pannelli più compatti su mobile landscape */
   .overlay-panel {
     max-width: 85vw !important;
     max-height: 75vh !important;
     min-width: 260px !important;
     padding: clamp(12px, 1.5vw, 16px) clamp(14px, 2vw, 20px) !important;
   }

   .overlay-panel.video-panel {
     max-width: fit-content !important;
     max-height: 100vh !important;
     width: auto !important;
     padding: 0 !important;
     background: #000 !important;
   }
   
   #quizVideo {
     max-width: 100vw !important;
     max-height: 100vh !important;
     width: auto !important;
     height: auto !important;
     display: block !important;
     margin: 0 auto !important;
   }

   .overlay-title {
     font-size: clamp(0.9rem, 2.5vw, 1.3rem) !important;
     margin-bottom: clamp(5px, 0.8vh, 8px) !important;
   }

   .overlay-text {
     font-size: clamp(0.75rem, 1.4vw, 0.85rem) !important;
     margin: clamp(2px, 0.4vh, 4px) 0 !important;
   }

   .overlay-button {
     font-size: clamp(0.75rem, 1.3vw, 0.9rem) !important;
     padding: clamp(5px, 0.8vw, 6px) clamp(10px, 1.5vw, 14px) !important;
   }
   
   #pillolaText {
     font-size: clamp(0.7rem, 1.3vw, 0.8rem) !important;
     max-height: 30vh !important;
     padding: clamp(8px, 1vw, 10px) !important;
   }

   #quizVideo {
     max-height: 50vh !important;
   }
   
   /* Gauge già responsive con unità viewport - mantiene posizioni relative fisse */
 }

@media (max-width: 640px) {
  .overlay-panel {
    padding: 18px 16px;
    max-width: 95vw;
  }

  .overlay-title {
    font-size: 1.6rem;
  }

  .overlay-text {
    font-size: 1rem;
  }

  .overlay-button {
    width: 100%;
    font-size: 1.1rem;
  }
}