/* -------------------------------------------------------------------------- */
/* --- 1. CONFIGURAZIONE FONT E VARIABILI GLOBALI --- */
/* -------------------------------------------------------------------------- */

:root {
    --font-pixel: 'Press Start 2P', cursive;
    --color-background: #000000;
    --color-text: #ffffff;
    --color-primary: #00ff00; /* Verde Neon */
    --color-secondary: #c71627; /* rosso scuro */
    --color-correct: #00cc00; /* Verde scuro */
    --color-wrong: #cc0000; /* Rosso */
    --color-gold: #ffd700;
}

html {
    overscroll-behavior: none; /* Impedisce il "pull to refresh" che può causare salti */
	max-width: 100vw;
    overflow-x: hidden;
    position: relative;
}


body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-pixel);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding-bottom: 20px;
	overscroll-behavior: none; /* Impedisce il "pull to refresh" che può causare salti */
	max-width: 100vw;
    overflow-x: hidden;
    position: relative;
}

/* -------------------------------------------------------------------------- */
/* --- 2. AREA IMMAGINE (HEADER) --- */
/* -------------------------------------------------------------------------- */

#img-container {
    width: 100%;
    max-width: 600px;
    margin-bottom: 10px;
    border: 3px solid var(--color-primary);
  /*  box-shadow: 0 0 15px var(--color-primary); */
    background-color: #111;
}


#game-image {
    width: 100%;
    height: 100%; /* Sfrutta l'altezza fissata dal contenitore */
    object-fit: cover; /* L'immagine riempirà il quadrato */
    transition: all 0.5s ease-in-out; 
    display: block;
}

/* #game-image {
/*    width: 100%;
/*  Altezza gestita da JS (300px per mappa, auto per isola) */
/*    transition: all 0.5s ease-in-out; 
/*    display: block;
/* }

/* -------------------------------------------------------------------------- */
/* --- 3. AREA GIOCO PRINCIPALE --- */
/* -------------------------------------------------------------------------- */

#game-area {
    width: 100%;
    max-width: 600px;
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
}

#title-text {
  color: var(--color-secondary);
  font-size: 2.5rem;
  margin-top: 25px;
  margin-bottom: 25px;
  text-shadow: 0 0 5px var(--color-secondary);
  line-height: 3rem;
  letter-spacing: -0.5px;
}

#story-text {
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: 0px;
  min-height: 50px;
  margin-top: 0px;
}

#story-text.medal-animation {
    text-align: center;
}

/* -------------------------------------------------------------------------- */
/* --- 4. BOTTONI DI SCELTA (AGGIORNATI) --- */
/* -------------------------------------------------------------------------- */

/* Regole base per le scelte (default: colonna con 10px di gap, come richiesto per le risposte) */
#choices-container {
    display: flex;
    flex-direction: column;
    gap: 10px; /* <--- Questo è il layout standard per le risposte */
    margin-top: 40px;
}

/* Contenitore specifico per le scelte iniziali (Livelli) */
#choices-container.level-choices {
    /* Sovrascrivi il default */
    flex-direction: column; 
    gap: 10px; /* <--- Questo è il layout compatto per i livelli */
    justify-content: center;
    flex-wrap: wrap; 
}

.btn {
    font-family: var(--font-pixel); /* Applica il font pixel */
    background-color: var(--color-primary);
    color: var(--color-background);
    border: 2px solid var(--color-text);
    padding: 12px 15px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.1s;
    box-shadow: 0 4px 0 var(--color-text);
    
    /* NUOVO: Aumenta la dimensione del font per i bottoni principali */
    font-size: 1.3rem; 
    
    /* Aggiunge spazio tra i caratteri per leggibilità */
    letter-spacing: -0.5px; 
}

.btn:hover:not(:disabled) {
    background-color: var(--color-secondary);
    color: var(--color-text);
}

.btn:active:not(:disabled) {
    box-shadow: 0 2px 0 var(--color-text);
    transform: translateY(2px);
}

.btn:disabled {
    background-color: #005c00 !important;
  color: #090;
    cursor: not-allowed;
    box-shadow: none;
}

/* --- BOTTONE DISABILITATO (VERDE SCURO "SPENTO") --- */
.btn-disabled {
    /* Un verde neon molto scurito e desaturato */
    background-color: #005c00 !important;
  color: #090;
    border-color: #004400 !important;     /* Bordo poco visibile */
    
    /* Impedisce l'interazione */
    cursor: not-allowed;
    pointer-events: none;                 /* Blocca ogni evento del mouse */
    
    /* Rende il bottone meno brillante rispetto agli altri */
    opacity: 0.7;
    filter: grayscale(0.5);               /* Spegne leggermente la saturazione */
    box-shadow: none !important;          /* Toglie i bagliori neon */
    transform: none !important;
}

/* Rimuove qualsiasi effetto hover per i tasti disabilitati */
.btn-disabled:hover {
    background-color: #003300 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Stile specifico per i bottoni di risposta (se necessario, altrimenti usa .btn) */
.answer-btn {
    /* Può sovrascrivere se necessario, altrimenti eredita da .btn */
}

/* Stato Risposta */
.answer-btn.correct {
    background-color: var(--color-correct);
    color: var(--color-text);
    box-shadow: 0 4px 0 #005500;
}

.answer-btn.wrong {
    background-color: var(--color-wrong);
    color: var(--color-text);
    box-shadow: 0 4px 0 #550000;
}


/* -------------------------------------------------------------------------- */
/* --- 5. AIUTI E DISPLAY PUNTEGGIO --- */
/* -------------------------------------------------------------------------- */

.score-info {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-gold);
  border: 1px dashed var(--color-gold);
  padding: 5px;
  margin-bottom: 10px;
  line-height: 25px;
}

#help-container {
    display: flex;
    justify-content: space-between;
    gap: 5px;
}

.help-btn {
    font-family: var(--font-pixel); /* Applica il font pixel */
    flex-grow: 1;
    background-color: #333;
    color: var(--color-text);
    border: 1px solid var(--color-primary);
    padding: 5px;
    font-size: 0.75rem;
  box-shadow: none;
  line-height: 20px;
}

.help-btn:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: var(--color-background);
}


/* -------------------------------------------------------------------------- */
/* --- 6. FEEDBACK E ANIMAZIONI (CORRETTO PER OVERLAY) --- */
/* -------------------------------------------------------------------------- */

/* Regola per nascondere: usiamo opacity per le transizioni */
.hidden {
   opacity: 0 !important;
    pointer-events: none !important; /* Non blocca i click quando è invisibile */
}

/* Base dell'Overlay: copre tutto, fisso e sopra a tutti */
#feedback-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* VALORE CHIAVE: Aumenta l'opacità per un vero scurismento */
    background: rgba(0, 0, 0, 0.8); 
    
    z-index: 1000;
    
    /* Imposta le proprietà di visualizzazione per centrare il feedback */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    
    /* Transizione per mostrare e nascondere fluidamente */
    transition: opacity 0.3s ease-in-out;
    
    /* Inizialmente l'opacity deve essere 1 per non essere influenzato dal .hidden sopra */
    opacity: 1; 

    /* Font size grande per il feedback 'ESATTO'/'ERRATO' */
    font-size: 4rem;
	
	   /* Forza l'accelerazione hardware per evitare glitch grafici */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    /* Impedisce al testo di diventare bianco durante la transizione */
    -webkit-font-smoothing: antialiased;

}


/* Regola per l'Immagine della Medaglia (già presente) */
#feedback-overlay img {
    max-height: 50vh;
    width: auto;
    object-fit: contain;
}

/* Sovrascrive la dimensione del font per i pulsanti/div interni */
#feedback-overlay div,
#feedback-overlay button {
    font-size: 1rem;
}

#verifica {
        font-size: 3.5rem !important; 
    }

.feedback-show {
    animation: fadeIn 0.3s ease;
}

.feedback-correct {
    color: var(--color-correct);
    text-shadow: 0 0 10px var(--color-correct);
}

.feedback-wrong {
    color: var(--color-wrong);
    text-shadow: 0 0 10px var(--color-wrong);
}


/* Animazione specifica per il contenitore immagine */
.fade-in-container {
    animation: fadeInIntro 2s ease-in-out forwards !important;
}

@keyframes fadeInIntro {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes medalGrow {
    0% { transform: scale(0.5) rotate(-15deg); opacity: 0; }
    80% { transform: scale(1.1) rotate(5deg); opacity: 1; }
    100% { transform: scale(1.0) rotate(0deg); }
}

/* -------------------------------------------------------------------------- */
/* --- 7. INPUT NICKNAME (Schermata 3) --- */
/* -------------------------------------------------------------------------- */

#nickname-input-container {
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#name-display {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.name-char {
    font-size: 3rem;
    color: var(--color-gold);
    border-bottom: 4px solid var(--color-primary);
    width: 45px;
    text-align: center;
    line-height: 1;
}

#keypad-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
    max-width: 400px;
}

/* -------------------------------------------------------------------------- */
/* --- 8. CLASSIFICA --- */
/* -------------------------------------------------------------------------- */



#contenitoreclassifica { font-size: 1rem; overflow-x: auto; max-width: 100%; margin: 0 auto; margin-bottom:40px }




/* ==================================== */
/* 0. STILI BASE FINE ISOLA             */
/* ==================================== */

/* Contenitore che copre lo schermo e centra i risultati */
#end-screen-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.85); /* Sfondo scuro e semitrasparente */
    z-index: 1000;
}

#fine-isola-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 20px;
    background-color: #2b2b2b; /* Tema scuro arcade */
    border-radius: 15px;
    box-shadow: 0 0 50px rgba(255, 0, 0, 0.60);
    max-width: 600px;
    width: 90%;
    color: #fff;
    opacity: 0; /* Inizialmente nascosto per l'animazione globale */
	box-sizing: border-box; /* Include padding nel calcolo della larghezza */
    overflow: hidden;
}

#end-header {
    margin-bottom: 25px;
    color: var(--color-gold); /* Usa il colore oro del tema */
}

#end-title {
    font-size: 2em;
    margin-bottom: 5px;
}

/* Messaggi Centrali (Medaglia & Boss) */
#end-medal-result,
#end-miniboss-result {
    margin: 15px 0px !important;
    padding: 15px;
    background: #3a3a3a;
    border-radius: 8px;
    width: 90%;
    transform: scale(0.5); /* Inizialmente piccolo per l'animazione */
    opacity: 0;
}

#end-medal-img,
#end-miniboss-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 10px;
}

#end-medal-message,
#end-miniboss-message {
    font-size: 1.3em;
    font-weight: bold;
    color: #00ff00; /* Verde successo */
}

/* Statistiche Dettagli */
#end-stats-container,
#end-detail-container {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin-top: 15px;
    padding: 15px;
    border: 1px solid #555;
    border-radius: 8px;
    opacity: 0; /* Inizialmente nascosto */
    transform: translateX(-100%);
}

#end-stats-container {
    background-color: #1f1f1f; 
}

#end-detail-container {
    background-color: #303030;
}

.stats-heading {
    color: var(--color-gold);
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.stat-item,
.detail-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 1em;
}

.stat-value {
    font-weight: bold;
    color: #00ffff; /* Ciano per i valori */
}

/* Pulsante */
#end-action-area {
    margin-top: 30px;
	margin-bottom: 20px;
    opacity: 0;
}

/* Linea separatrice */
.separator-delay-3 {
    width: 90%;
    border: 0;
    border-top: 2px dashed #666;
    margin: 10px 0;
    opacity: 0;
}

/* ==================================== */
/* 1. KEYFRAMES E CLASSI DI ANIMAZIONE  */
/* ==================================== */

/* Keyframes */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInTop {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-100%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}


/* Classi di Animazione con Ritardi */

/* 0. Globale (Contenitore) */
#fine-isola-container.fade-in-global {
    animation: fadeIn 0.8s ease-out both;
}

/* 1. Header */
.slide-in-top {
    animation: slideInTop 0.6s ease-out 0s both; /* Immediato */
}

/* 2. Medaglia (Ritardo 1) */
#end-medal-result.zoom-in-delay-1 {
    animation: zoomIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.8s both; /* Effetto 'bounce' per impatto */
}

/* 3. Mini Boss (Ritardo 2) */
#end-miniboss-result.zoom-in-delay-2 {
    animation: zoomIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.4s both;
}

/* 4. Separatore (Animazione linea) */
.separator-delay-3 {
    animation: fadeIn 0.4s ease-out 1.9s both;
}

/* 5. Statistiche Principali (Ritardo 3) */
#end-stats-container.slide-in-left-delay-3 {
    animation: slideInLeft 0.5s ease-out 2.2s both;
}

/* 6. Dettagli Livello (Ritardo 4) */
#end-detail-container.slide-in-right-delay-4 {
    animation: slideInRight 0.5s ease-out 2.7s both;
}

/* 7. Bottone (Ritardo 5) */
#end-action-area.fade-in-delay-5 {
    animation: fadeIn 0.6s ease-out 3.3s both;
}


/* ARCADE MARQUEE */

.arcade-marquee{
  width:100%;
  height:100%;
  overflow:hidden;
  position:relative;
  background:none;
  height:40px;
}

/* scanline molto leggere */
.arcade-marquee::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.04) 0px,
    rgba(255,255,255,.04) 1px,
    rgba(0,0,0,0) 4px,
    rgba(0,0,0,0) 8px
  );
  opacity:.25;
}

.arcade-viewport{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
}

/* ✅ VELOCITÀ QUI */
.arcade-track{
  display:inline-flex;
  align-items:center;
  gap:3rem;
  white-space:nowrap;

  animation: arcade-scroll 30s linear infinite;
  will-change:transform;
}

/* TESTO – pulito e leggibile */
.arcade-text{
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;

  font-size:100%;
  line-height:1;

  /* colore base leggibile */
  color:#ffe96a;

  /* glow SOBRIO */
  text-shadow:
    0 0 6px rgba(255,233,106,.6),
    0 0 12px rgba(255,233,106,.35);
}

/* rainbow solo se supportato */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .arcade-text{
    background:linear-gradient(
      90deg,
      #00e5ff,
      #7c4dff,
      #ff2bd6,
      #ffeb3b,
      #00ff7a,
      #00e5ff
    );
    background-size:200% 100%;
    color:transparent;
    -webkit-background-clip:text;
    background-clip:text;

    /* niente emboss */
    text-shadow:
      0 0 8px rgba(255,255,255,.45),
      0 0 16px rgba(0,255,255,.25);

    animation: shimmer 3s ease-in-out infinite;
  }
}

/* ANIMAZIONI */
@keyframes arcade-scroll{
  from{ transform:translateX(20%); }
  to{ transform:translateX(-100%); }
}

@keyframes shimmer{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

/* accessibilità */
@media (prefers-reduced-motion: reduce){
  .arcade-track,
  .arcade-text{
    animation:none!important;
  }
}



/* --- MEDIA QUERY: Stili Specifici per Mobile (< 576px) --- */
@media (max-width: 575.98px) {
	
	
	#title-text {
  color: var(--color-secondary);
  font-size: 2rem;
  margin-top: 30px;
  margin-bottom: 25px;
  text-shadow: 0 0 5px var(--color-secondary);
  line-height: 2.5rem;
  letter-spacing: -0.5px;
}
    
    /* Riduce la dimensione del testo di feedback (ESATTO/ERRATO) */
    #verifica {
        font-size: 2rem !important; /* Dimensione ridotta (es. da 4rem a 2.5rem) */
    }
    
	#img-container {
  width: 75%;
  max-width: 300px;
  margin-top:15px;
}
	
	#contenitoreclassifica { font-size: 0.75rem; overflow-x: auto; max-width: 100%; margin: 0 auto; margin-bottom:40px }
	
	#end-title {
    font-size: 1.25em;
    margin-bottom: 5px;
	}
	
    /* Se necessario, riduci anche il testo MEDAGLIA OTTENUTA! (che è inline in JS) */
    /*
    #feedback-overlay div {
        font-size: 1rem !important;
    }
    */
}