/* ===== Base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bleu: #4d7cff;
  --bleu-fonce: #3a5fcc;
  --vert: #36c275;
  --rouge: #ff5a5a;
  --jaune: #ffc94d;
  --fond: #eef4ff;
  --case-vide: #fff;
  --texte: #2a3550;
}

html, body {
  height: 100%;
  font-family: "Comic Sans MS", "Trebuchet MS", "Segoe UI", sans-serif;
  background: linear-gradient(160deg, #d8e6ff 0%, #eef4ff 60%, #fef6e0 100%);
  color: var(--texte);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 16px;
  overflow: hidden;
}

/* ===== Écrans ===== */
.ecran {
  display: none;
  width: 100%;
  max-width: 760px;
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.ecran.active { display: flex; }

h1 {
  font-size: clamp(28px, 6vw, 46px);
  color: var(--bleu-fonce);
  text-shadow: 0 2px 0 #fff;
}
.sous-titre { font-size: clamp(16px, 3vw, 22px); color: #5a6a8a; }
.consigne { font-size: clamp(18px, 3.5vw, 24px); font-weight: bold; margin-top: 8px; }

/* ===== Boutons ===== */
.choix-niveaux {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.btn-niveau {
  font-family: inherit;
  font-size: clamp(20px, 4vw, 26px);
  font-weight: bold;
  padding: 18px 28px;
  border: none;
  border-radius: 20px;
  background: var(--bleu);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--bleu-fonce);
  transition: transform .08s, box-shadow .08s;
}
.btn-niveau:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--bleu-fonce);
}

.btn-principal {
  font-family: inherit;
  font-size: clamp(20px, 4vw, 26px);
  font-weight: bold;
  padding: 16px 34px;
  border: none;
  border-radius: 18px;
  background: var(--vert);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 0 #28a05c;
  transition: transform .08s, box-shadow .08s;
}
.btn-principal:active { transform: translateY(4px); box-shadow: 0 2px 0 #28a05c; }
.btn-principal[hidden] { display: none; }

.btn-petit {
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  padding: 8px 16px;
  border: none;
  border-radius: 12px;
  background: #fff;
  color: var(--bleu-fonce);
  cursor: pointer;
  box-shadow: 0 3px 0 #c9d6f5;
}
.btn-petit:active { transform: translateY(2px); box-shadow: none; }

/* ===== Barre du haut ===== */
.barre-haut {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.progression { font-size: clamp(16px, 3vw, 20px); font-weight: bold; color: #5a6a8a; }
.score {
  font-size: clamp(18px, 3.5vw, 24px);
  font-weight: bold;
  color: var(--jaune);
  text-shadow: 0 1px 0 #e0a800;
}

/* ===== Zone du mot ===== */
.zone-mot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  min-height: 90px;
  align-items: center;
  margin: 10px 0;
}

.case {
  width: clamp(48px, 12vw, 72px);
  height: clamp(58px, 14vw, 86px);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(28px, 7vw, 46px);
  font-weight: bold;
  text-transform: uppercase;
}

/* lettre déjà donnée */
.case.fixe {
  background: #dce6ff;
  color: var(--bleu-fonce);
  box-shadow: inset 0 -4px 0 #c2d2ff;
}

/* trou à remplir */
.case.trou {
  background: var(--case-vide);
  color: var(--texte);
  border: 4px dashed #b8c6e8;
}
.case.trou.survol { border-color: var(--bleu); background: #f0f5ff; transform: scale(1.05); }

/* trou rempli correctement */
.case.trou.correct {
  border: 4px solid var(--vert);
  background: #e3fbee;
  color: #1f8a52;
  animation: pop .35s ease;
}

/* erreur */
.case.trou.erreur {
  border-color: var(--rouge);
  background: #ffe8e8;
  animation: secousse .35s ease;
}

/* ===== Bac de lettres ===== */
.bac-lettres {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  min-height: 80px;
  padding: 14px;
  background: rgba(255, 255, 255, .55);
  border-radius: 20px;
  width: 100%;
}

.lettre {
  width: clamp(48px, 12vw, 68px);
  height: clamp(48px, 12vw, 68px);
  border-radius: 14px;
  background: var(--jaune);
  color: #7a5800;
  font-size: clamp(26px, 6vw, 40px);
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  box-shadow: 0 5px 0 #e0a800;
  touch-action: none;
  transition: transform .08s;
}
.lettre:active { cursor: grabbing; }
.lettre.utilisee { visibility: hidden; }
.lettre.fantome {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  margin: 0;
  transform: scale(1.15);
  box-shadow: 0 8px 16px rgba(0,0,0,.25);
}

/* ===== Message de réussite ===== */
.message-reussite {
  font-size: clamp(24px, 5vw, 36px);
  font-weight: bold;
  color: var(--vert);
  height: 44px;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .3s, transform .3s;
}
.message-reussite.visible {
  opacity: 1;
  transform: scale(1);
  animation: pop .4s ease;
}

.score-final { font-size: clamp(20px, 4vw, 28px); font-weight: bold; }

/* ===== Confettis ===== */
.confettis {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 500;
}
.confetti {
  position: absolute;
  top: -20px;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  animation: tombe linear forwards;
}

/* ===== Animations ===== */
@keyframes secousse {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
@keyframes pop {
  0% { transform: scale(.6); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes tombe {
  to { transform: translateY(105vh) rotate(720deg); opacity: .9; }
}

/* ===== Mobile : on réduit cases et lettres pour que les mots longs
   tiennent mieux et restent lisibles ===== */
@media (max-width: 480px) {
  body { padding: 10px; }
  .ecran { gap: 16px; }

  /* Cases du mot */
  .zone-mot { gap: 6px; min-height: 64px; }
  .case {
    width: clamp(34px, 9vw, 48px);
    height: clamp(42px, 11vw, 58px);
    font-size: clamp(20px, 5.5vw, 30px);
    border-radius: 10px;
  }
  .case.trou { border-width: 3px; }
  .case.trou.correct, .case.trou.erreur { border-width: 3px; }

  /* Lettres à glisser */
  .bac-lettres { gap: 8px; padding: 10px; min-height: 60px; }
  .lettre {
    width: clamp(38px, 10vw, 48px);
    height: clamp(38px, 10vw, 48px);
    font-size: clamp(20px, 5.5vw, 30px);
    border-radius: 10px;
  }
}