/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Chewy&family=Cinzel:wght@400..900&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Cormorant:ital,wght@0,300..700;1,300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Slackey&family=Zalando+Sans:ital,wght@0,200..900;1,200..900&display=swap');/* === FONT BASE === */
html, body {
  font-family: 'Noto Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.2em;
  line-height: 1.2;
  color: #1f2a36;
  background: #fff;
  margin: 0;
  padding: 0;
  max-width: 980px;
  margin: 64px auto 96px auto;
}

/* Titolo */
h3 {
  font-family: 'Slackey', 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 1.6em;
  color: #45a2ce;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 20px;
}

.unita {
	color: #e3000a;
  	font-family: 'Slackey', 'Open Sans', sans-serif;
	font-size: 2em ;
	font-weight: 400;
	text-align: center;
}

/* === INPUT NOME === */
.user-info {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  color: red;
}
.user-info input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid #91fbf7;
  font-size: 1.2em;
  width: clamp(240px, 60%, 600px);
  box-sizing: border-box;
}

/* === CARD ESERCIZIO === */
.exercise {
  margin: 18px 0;
  padding: 18px 22px;
  background: #c5eaee;
  border-radius: 14px;
  border: 1px solid #1fbbce;
  box-shadow: 0 3px 16px rgba(25,66,97,0.12);
  font-size: 1.0em;
}

/* === NUMERI E BADGE === */
.numero {
  color: #e3000a;
  font-family: 'Slackey', 'Open Sans', sans-serif;
}
.badge-punteggio {
  display: inline-flex;
  align-items: center;
  background: #af151d;
  color: #fff;
  border-radius: 999px;
  font-size: 0.8em;
  font-weight: 800;
  padding: 4px 10px;
  font-family: 'Slackey', 'Open Sans', sans-serif;
}

/* === OPZIONI / RADIO === */
.options {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 1.0em;
}
.checkbox-wrapper input {
  position: absolute;
  opacity: 0;
}
.checkmark {
  width: 22px;
  height: 22px;
  border: 2px solid #45a2ce;
  border-radius: 6px;
  background: #fff;
  position: relative;
}
.checkbox-wrapper input:checked + .checkmark::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid #45a2ce;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* === DRAG & DROP === */
.draggable {
  display: inline-block;
  padding: 6px 12px;
  margin: 4px;
  border: 2px solid #45a2ce;
  border-radius: 10px;
  background: #fff;
  cursor: grab;
  font-weight: 500;
}
.drop-zone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  min-height: 36px;
  border: 2px dashed #c9da74;
  border-radius: 10px;
  background: #f6fafc;
  text-align: center;
  font-size: 1.0em;
}

/* === RISPOSTA APERTA === */
textarea, input[type="text"] {
  width: clamp(200px, 90%, 720px);
  padding: 10px 12px;
  border: 2px solid #91fbf7;
  border-radius: 10px;
  font-size: 1.0em;
}

/* === ESERCIZI CON IMMAGINE === */
.image-exercise {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 14px;
}
.image-option {
  border: 2px solid #91fbf7;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  font-size: 1.2em;
  background: #fff;
  transition: 0.2s;
}
.image-option:hover {
  border-color: #45a2ce;
  background: #eef6ff;
}
.image-option > div {
    font-size: 1.4em;!important; /* modifica questo valore a piacere */
}


/* ========================================================= */
/*               ESERCIZI DI TIPO "SOTTOLINEA"               */
/* ========================================================= */

.underline-exercise {
  font-size: 1.2rem;
  line-height: 1.2;
}

.underline-exercise .u-token {
  border-bottom: 2px solid transparent;
  cursor: pointer;
  user-select: none;
  padding: 0 2px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.underline-exercise .u-token:hover {
  color: var(--c-primary-dark);
}

.underline-exercise .u-token.u-on {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: green;
  color: var(--c-primary-dark);
}


/* === BOTTONI === */
button {
  padding: 10px 24px;
  border: none;
  border-radius: 999px;
  background: #45a2ce;
  color: #fff;
  font-family: 'Slackey';
  font-size: 1.0em;
  font-weight: 800;
  cursor: pointer;
}
button:hover {
  background: #015c8f;
}

/* === LABEL === */
.label {
  font-family: 'Slackey';
  font-weight: 800;
  font-size: 1.0em;
  border-radius: 999px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.exercise-feedback {
 color: red;
 font-size: 1.0em;
 font-family: Oswald;
}




/* === RESPONSIVE === */
@media (max-width: 1023px) {
  html, body {
  font-size: 1.2em;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  max-width: 980px;
  margin: 64px auto 96px auto;
}

/* Titolo */
h3 {
  font-family: 'Slackey', 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 1.6em;
  color: #45a2ce;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 20px;
}

/* === INPUT NOME === */
.user-info {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
.user-info input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid #91fbf7;
  font-size: 1.2em;
  width: clamp(240px, 60%, 600px);
  box-sizing: border-box;
}

/* === CARD ESERCIZIO === */
.exercise {
  margin: 18px 0;
  padding: 18px 22px;
  background: #cfedf8;
  border-radius: 14px;
  border: 1px solid #91fbf7;
  box-shadow: 0 3px 16px rgba(25,66,97,0.12);
  font-size: 1.0em;
}

/* === NUMERI E BADGE === */
.numero {
  color: #e3000a;
  font-family: 'Slackey';
}
.badge-punteggio {
  display: inline-flex;
  align-items: center;
  background: #af151d;
  color: #fff;
  border-radius: 999px;
  font-size: 1.4em;
  font-weight: 600;
  padding: 4px 10px;
}

/* === OPZIONI / RADIO === */
.options {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 1.8em;
}
.checkbox-wrapper input {
  position: absolute;
  opacity: 0;
}
.checkmark {
  width: 40px;
  height: 40px;
  border: 2px solid #45a2ce;
  border-radius: 6px;
  background: #fff;
  position: relative;
}
.checkbox-wrapper input:checked + .checkmark::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 2px;
  width: 12px;
  height: 24px;
  border: solid #45a2ce;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.exercise[data-tipo="completamento"] {
        font-size: 1.8em; /* riduce un po' su smartphone, ma resta leggibile */
    }
.exercise[data-tipo="completamento"] .cloze {
    font-size: 1em; /* oppure quello che hai già definito */
}



/* === DRAG & DROP === */

.exercise.drag-drop > div:first-child,
.exercise.drag-drop .draggable + div {
    font-size: 1.0em; /* regola a piacere */
}
/* Domande drag & drop */
    .exercise.drag-drop div > strong {
        font-size: 1.2em; /* dimensione maggiore solo per la domanda */
    }

.draggable {
  display: inline-block;
  padding: 6px 12px;
  margin: 4px;
  border: 2px solid #45a2ce;
  border-radius: 10px;
  background: #fff;
  cursor: grab;
  font-weight: 500;
  font-size: 1.8em;
}
.drop-zone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  min-height: 60px;
  border: 2px dashed #c9da74;
  border-radius: 10px;
  background: #f6fafc;
  text-align: center;
  font-size: 1.0em;
  vertical-align: middle;
}



/* === RISPOSTA APERTA === */
textarea, input[type="text"] {
  width: clamp(200px, 90%, 720px);
  padding: 10px 12px;
  border: 2px solid #91fbf7;
  border-radius: 10px;
  font-size: 1.8em;
}

/* === ESERCIZI CON IMMAGINE === */
.image-exercise {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 14px;
}
.image-option {
  border: 2px solid #91fbf7;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  font-size: 1.8em;
  background: #fff;
  transition: 0.2s;
}
.image-option:hover {
  border-color: #45a2ce;
  background: #eef6ff;
}
.image-option > div {
    font-size: 1.8em;!important; /* modifica questo valore a piacere */
}


/* ========================================================= */
/*               ESERCIZI DI TIPO "SOTTOLINEA"               */
/* ========================================================= */

.underline-exercise {
  font-size: 1.2rem;
  line-height: 1.2;
}

.underline-exercise .u-token {
  border-bottom: 2px solid transparent;
  cursor: pointer;
  user-select: none;
  padding: 0 2px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.underline-exercise .u-token:hover {
  color: var(--c-primary-dark);
}

.underline-exercise .u-token.u-on {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-primary);
  color: var(--c-primary-dark);
}


/* === BOTTONI === */
button {
  padding: 10px 24px;
  border: none;
  border-radius: 999px;
  background: #45a2ce;
  color: #fff;
  font-family: 'Slackey';
  font-size: 1.0em;
  font-weight: 800;
  cursor: pointer;
}
button:hover {
  background: #015c8f;
}

/* === LABEL === */
.label {
  font-family: 'Slackey';
  font-weight: 800;
  font-size: 1.0em;
  border-radius: 999px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Feedback completamento */
.exercise[data-tipo="completamento"] .exercise-feedback {
    font-size: 0.6em; /* dimensione normale per il feedback */
}

/* Badge punteggio all'interno dell'esercizio di completamento */
.exercise[data-tipo="completamento"] .badge-punteggio {
    font-size: 0.8em; /* oppure il valore che vuoi */
}


}