/* ═══ Motus — design system jeux.html ═══ */
.jeu-v-wrap { max-width: 520px; margin: 0 auto; }
#game-content { overflow: hidden; }


/* ── Hint strip (affiché / caché par JS) ── */
#hint {
  padding: 8px 14px;
  font-size: 11px;
  color: var(--tx3);
  border-bottom: 1px solid var(--bd);
  background: var(--sf);
  text-align: center;
  line-height: 1.5;
}

/* ── Grille ── */
#grid-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
}

.grid-row { display: flex; gap: 6px; }

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 800;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.cell.empty {
  background: var(--cd2);
  border: 2px solid var(--bd2);
  color: var(--tx3);
}

.cell.correct,
.cell.locked {
  background: linear-gradient(135deg, #cc0000, #ff1a1a);
  border: 2px solid #ff4444;
  box-shadow: 0 0 10px rgba(255,0,0,.18);
  color: #fff;
}

.cell.misplaced {
  background: linear-gradient(135deg, #d4941a, #ffd700);
  border: 2px solid #ffdd44;
  box-shadow: 0 0 10px rgba(255,200,0,.16);
  color: #fff;
}

.cell.absent {
  background: linear-gradient(135deg, #2a2a3e, #3a3a52);
  border: 2px solid rgba(255,255,255,.08);
  color: #fff;
}

.cell.locked-hint {
  background: rgba(204,0,0,.08);
  border: 2px solid rgba(204,0,0,.18);
  color: var(--tx2);
}

.cell.typed {
  background: rgba(109,92,255,.08);
  border: 2px solid rgba(109,92,255,.25);
  color: var(--tx);
  transform: scale(1.04);
}

.dk .cell.typed { border-color: rgba(168,152,255,.35); }

.cell.reveal { animation: flipIn .5s ease both; }

/* ── Game over ── */
#game-over {
  display: none;
  text-align: center;
  padding: 14px;
  border-top: 1px solid var(--bd);
  animation: fadeUp .5s ease both;
}

#game-over.visible { display: block; }

#bravo {
  display: none;
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 800;
  color: var(--ok);
  margin-bottom: 8px;
}

#lost-msg { display: none; }

.lost-caption {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx2);
}

#lost-word {
  margin-top: 6px;
  font-size: clamp(20px, 5vw, 26px);
  letter-spacing: 4px;
  font-weight: 800;
  color: #cc0000;
  font-family: var(--mono);
}

/* ── Clavier virtuel ── */
.kb-row {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 4px;
}

.kb-key {
  height: 36px;
  width: clamp(20px, 5.5vw, 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--cd);
  color: var(--tx);
  border: 1px solid var(--bd2);
  box-shadow: var(--s1);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  transition: transform .1s ease, filter .1s ease;
}

.kb-key.wide { width: clamp(20px, 5.5vw, 28px); font-size: 13px; }

.kb-key:hover,
.kb-key:active {
  transform: scale(1.06);
  filter: brightness(1.08);
}

.kb-key.kb-correct {
  background: linear-gradient(135deg, #cc0000, #ff1a1a);
  border-color: #ff4444;
  color: #fff;
}

.kb-key.kb-misplaced {
  background: linear-gradient(135deg, #d4941a, #ffd700);
  border-color: #ffdd44;
  color: #fff;
}

.kb-key.kb-absent {
  background: var(--sf2);
  color: var(--tx3);
  border-color: var(--bd);
}

/* ── Shake ── */
.shake { animation: shake .4s ease; }

/* ── Animations ── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}

@keyframes flipIn {
  0%   { transform: scaleY(1); }
  50%  { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── HTML page overlays (démarrage / fin) ── */
.jvmt-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: var(--cd, #fff);
  overflow: hidden;
}

.jvmt-overlay.hidden { display: none; }

.jvmt-overlay > .snk-screen {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.jvmt-overlay .snk-screen {
  justify-content: center;
  align-items: center;
  padding-top: 14px;
  padding-bottom: 14px;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .jeu-v-wrap { max-width: none; }
  .kb-key { height: 32px; width: clamp(18px, 5vw, 24px); font-size: 10px; }
  .kb-key.wide { width: clamp(18px, 5vw, 24px); }
}