/* ============================================================
   motex.css — Page de jeu MoteX (famille MOTS, rouge)
   v1 — la grille a son propre fichier (motex-grid.css)
   ============================================================ */

.mtx-play {
  padding-top: var(--space-6);
  padding-bottom: var(--space-12);
}

/* ----- Barre d'état ----- */
.mtx-play-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.mtx-play-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mtx-info-len {
  font-family: var(--font-title);
  letter-spacing: 3px;
  font-size: .9rem;
  color: var(--text);
  text-transform: uppercase;
}
.mtx-info-tries { font-size: .72rem; color: var(--muted-2); letter-spacing: 1px; }
.mtx-play-timer {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mtx-play-timer.is-low { color: var(--red); }

/* ----- Grille ----- */
.mtx-grid-host {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.mtx-grid-host.is-shake { animation: mtx-shake .35s ease; }
@keyframes mtx-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ----- Feedback ----- */
.mtx-feedback {
  text-align: center;
  min-height: 1.4em;
  font-size: .85rem;
  letter-spacing: .5px;
  color: var(--muted-2);
  margin-bottom: var(--space-4);
}
.mtx-feedback.is-win  { color: var(--green); font-weight: 500; }
.mtx-feedback.is-lose { color: var(--red); }
.mtx-feedback .pp { color: var(--gold); font-weight: 500; }

/* ----- Clavier virtuel ----- */
.mtx-keyboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
}
.mtx-kb-row { display: flex; gap: var(--space-2); justify-content: center; width: 100%; }
.mtx-key {
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  user-select: none;
  transition: transform .05s ease, background .15s ease;
}
.mtx-key:active { transform: scale(.92); }
.mtx-key.is-wide { flex: 1.6 1 0; font-size: .68rem; letter-spacing: 1px; color: var(--muted-2); }
.mtx-key.is-enter { background: var(--red); color: #fff; border-color: var(--red); }
.mtx-key.is-correct { background: var(--red);    color: #fff;     border-color: var(--red); }
.mtx-key.is-present { background: var(--gold);   color: #07070f;  border-color: var(--gold); }
.mtx-key.is-absent  { background: #0c0c14;       color: var(--muted); border-color: transparent; }
.mtx-keyboard[hidden] { display: none; }

/* ----- Idle / login ----- */
.mtx-idle, .mtx-login {
  text-align: center;
  padding: var(--space-8) var(--space-4);
}
.mtx-idle.hidden, .mtx-login.hidden { display: none; }
.mtx-idle-icon { font-size: 2rem; margin-bottom: var(--space-3); opacity: .7; }
.mtx-idle-title { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--text); margin-bottom: var(--space-2); }
.mtx-idle-sub { font-size: .82rem; color: var(--muted); }
.mtx-login-txt { font-size: .85rem; color: var(--muted-2); margin-bottom: var(--space-4); }

/* ----- Responsive ----- */
@media (max-width: 480px) {
  .mtx-grid { --mtx-cell-size: 34px; --mtx-gap: 5px; }
  .mtx-key { height: 44px; font-size: .9rem; }
  .mtx-play-timer { font-size: 1.5rem; }
}