/* --- Layout base del test --- */


.sentence{
  background:#fff;
  border:2px solid #1f7ae0;                 /* borde blavet solid */
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  padding:15px;
  font-size:1.2rem;                          /* text de la frase una mica més gran */
  line-height:1.6;
   box-shadow:
    0 0 0 2px rgba(31,122,224,.15) inset,   /* tint interior suau */
    0 0 12px rgba(31,122,224,.45);          /* halo exterior blaveta */
}

/* --- GAP (forat on deixar paraula) --- */
.gap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:100px;
  min-height:36px;
  padding:4px 6px;
  border:2px dashed #1f7ae0;
  border-radius:8px;
  background:#e9f3ff;
  vertical-align:middle;
}

/* --- Safata de paraules --- */
.words{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:15px;
  padding:12px;
  border:1px solid #d0d7e2;
  border-radius:12px;
  background:#f9fbff;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
}

/* --- Fitxes de paraula (estil comú) --- */
.word{
  display:inline-block;
  box-sizing:border-box;
  padding:4px 12px;
  border-radius:8px;
  background:linear-gradient(180deg,#1560b9 0%,#0d3f7a 100%);
  color:#fff;
  border:1px solid rgba(0,0,0,.15);
  box-shadow:0 2px 4px rgba(0,0,0,.15);
  cursor:grab;
  user-select:none;
  font-weight:600;
  transition:transform .15s, box-shadow .15s, filter .15s;
}
.word:hover{ transform:translateY(-1px); box-shadow:0 3px 6px rgba(0,0,0,.2); }
.word:active{ cursor:grabbing; filter:brightness(.95); }

/* --- Quan la paraula està dins del GAP, mantén EXACTE la mida --- */
.gap .word{
  padding:4px 12px;
  margin:0;
  flex:0 0 auto;
}

/* ======= FIX DE MIDA/TIPOGRAFIA =======
   Evita que la .word augmente la mida per la font de .sentence (1.2rem)
   i que el line-height la faça “més alta” dins la frase.
====================================== */
.sentence .word,
.words .word{
  font-size:1rem;          /* mateixa mida dalt i baix */
  line-height:1.1;         /* evita alçada extra de la línia */
}

/* --- Controls/auxiliars (si els uses) --- */
.controls{ display:flex; align-items:center; gap:15px; }
.btn-check{
  background:#28a745; border:none; padding:6px 16px;
  border-radius:6px; color:#fff; font-weight:bold; cursor:pointer;
}
.btn-check:disabled{ background:#aaa; cursor:not-allowed; }

.score{ font-size:.95rem; color:#444; }
.result{ margin-top:15px; font-weight:bold; }

/* Feedback visual de SortableJS (opcional) */
.sortable-ghost{ opacity:.6; }
.sortable-chosen{ transform:scale(1.02); }


/* Marcador de fatos (vides) */
.scoreboard{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.score-label{ font-weight:600; color:#334; }

.fatos{ display:inline-flex; gap:6px; vertical-align:middle; }
.fato-life{
  width:16px; height:16px; border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.55) 0 35%, transparent 36%),
    linear-gradient(180deg, #2a8bf2 0%, #0b5ed7 100%);   /* blau fosc amb degradat */
  box-shadow: 0 0 0 1px #cfe2ff inset, 0 1px 2px rgba(0,0,0,.25);
  display:inline-block;
}


/* Més espai vertical entre línies dins la frase */
.sentence{
  /* el gap fa 36px d'alçària: 36 + 10 = 46px de línia queda ample i net */
  line-height: 46px;   /* prova 42–50px segons et agrade */
}

/* opcional: una mica menys en mòbil */
@media (max-width: 576px){
  .sentence{ line-height: 42px; }
}

/* alternativa/extra: si vols encara un pèl més d’aire només al voltant dels gaps */
.sentence .gap{ margin-block: 4px; }  /* 4px damunt i baix (funciona perquè el gap és inline-flex) */