/*
 * mots-meles-ipa.css
 * Fonetix — https://fonetix.fr
 *
 * Personnalisation : modifie les variables dans :root
 * ou surcharge les classes .mmipa-* dans ta propre feuille de styles.
 */

/* ─── Variables ─────────────────────────────────────────────── */
:root {
  --mmipa-font:          'Charis SIL', 'Doulos SIL', 'DejaVu Sans', 'Segoe UI', sans-serif;
  --mmipa-cell-bg:       #ffffff;
  --mmipa-cell-border:   #e0ddd6;
  --mmipa-cell-color:    #1a1a1a;
  --mmipa-cell-hover:    #f5f4f0;
  --mmipa-cell-radius:   6px;

  --mmipa-selected-bg:   #b5d4f4;
  --mmipa-selected-color:#042c53;
  --mmipa-selected-border:#378add;

  --mmipa-found-bg:      #9fe1cb;
  --mmipa-found-color:   #04342c;
  --mmipa-found-border:  #1d9e75;

  --mmipa-error-bg:      #f7c1c1;
  --mmipa-error-color:   #501313;
  --mmipa-error-border:  #e24b4a;

  --mmipa-badge-bg:      #e6f1fb;
  --mmipa-badge-color:   #185fa5;

  --mmipa-btn-border:    #c8c5bd;
  --mmipa-btn-color:     #1a1a1a;
  --mmipa-btn-hover-bg:  #f5f4f0;

  --mmipa-msg-color:     #666;
  --mmipa-label-color:   #888;

  --mmipa-word-color:    #1a1a1a;
  --mmipa-word-found-color: #aaa;
  --mmipa-word-found-bg: #f5f4f0;
  --mmipa-word-border:   #e0ddd6;
}

/* ─── Mode sombre (automatique) ────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --mmipa-cell-bg:       #1e1e1e;
    --mmipa-cell-border:   #3a3a3a;
    --mmipa-cell-color:    #e8e8e8;
    --mmipa-cell-hover:    #2a2a2a;

    --mmipa-selected-bg:   #0c447c;
    --mmipa-selected-color:#b5d4f4;
    --mmipa-selected-border:#378add;

    --mmipa-found-bg:      #085041;
    --mmipa-found-color:   #9fe1cb;
    --mmipa-found-border:  #1d9e75;

    --mmipa-badge-bg:      #042c53;
    --mmipa-badge-color:   #85b7eb;

    --mmipa-btn-border:    #444;
    --mmipa-btn-color:     #e8e8e8;
    --mmipa-btn-hover-bg:  #2a2a2a;

    --mmipa-msg-color:     #999;
    --mmipa-label-color:   #777;

    --mmipa-word-color:    #e8e8e8;
    --mmipa-word-found-color: #666;
    --mmipa-word-found-bg: #1a1a1a;
    --mmipa-word-border:   #3a3a3a;
  }
}

/* ─── Cellule de grille ─────────────────────────────────────── */
.mmipa-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  border-radius: var(--mmipa-cell-radius);
  border: 0.5px solid var(--mmipa-cell-border);
  background: var(--mmipa-cell-bg);
  color: var(--mmipa-cell-color);
  font-family: var(--mmipa-font);
  transition: background 0.1s;
  white-space: nowrap;
  box-sizing: border-box;
}

.mmipa-cell:hover {
  background: var(--mmipa-cell-hover);
}

.mmipa-cell.mmipa-selected {
  background: var(--mmipa-selected-bg);
  color: var(--mmipa-selected-color);
  border-color: var(--mmipa-selected-border);
}

.mmipa-cell.mmipa-found {
  background: var(--mmipa-found-bg);
  color: var(--mmipa-found-color);
  border-color: var(--mmipa-found-border);
}

.mmipa-cell.mmipa-error {
  background: var(--mmipa-error-bg);
  color: var(--mmipa-error-color);
  border-color: var(--mmipa-error-border);
}

/* ─── Score et badge ────────────────────────────────────────── */
.mmipa-badge {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--mmipa-badge-bg);
  color: var(--mmipa-badge-color);
  font-family: sans-serif;
}

/* ─── Boutons ───────────────────────────────────────────────── */
.mmipa-btn {
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 6px;
  border: 0.5px solid var(--mmipa-btn-border);
  background: transparent;
  color: var(--mmipa-btn-color);
  cursor: pointer;
  font-family: sans-serif;
  transition: background 0.1s;
}

.mmipa-btn:hover {
  background: var(--mmipa-btn-hover-bg);
}

/* ─── Message de retour ─────────────────────────────────────── */
.mmipa-msg {
  min-height: 20px;
  font-size: 13px;
  color: var(--mmipa-msg-color);
  margin: 0 0 8px;
  font-family: sans-serif;
}

/* ─── Liste de mots ─────────────────────────────────────────── */
.mmipa-liste-label {
  font-size: 11px;
  color: var(--mmipa-label-color);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: sans-serif;
}

.mmipa-word-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mmipa-word-item {
  padding: 5px 10px;
  border-radius: 6px;
  border: 0.5px solid var(--mmipa-word-border);
  font-size: 14px;
  background: transparent;
  color: var(--mmipa-word-color);
  font-family: sans-serif;
}

.mmipa-word-item.mmipa-word-found {
  text-decoration: line-through;
  color: var(--mmipa-word-found-color);
  background: var(--mmipa-word-found-bg);
}