/*
 * Moteur MOTS EN GRILLES maison (liseuse web) — grille de lettres + liste des
 * mots à trouver. Sélection au doigt (glisser) ou en deux touchers.
 */
.meg { --meg-cell: 32px; }
.meg-cols { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.meg-left { flex: 1 1 320px; min-width: 0; overflow-x: auto; }
.meg-right { flex: 0 1 260px; min-width: 200px; }
.meg-grid { border-collapse: collapse; margin: 0 auto; background: #fff; table-layout: fixed; touch-action: none; }
.meg-grid td {
    width: var(--meg-cell); height: var(--meg-cell); padding: 0;
    border: 1px solid #DCE6ED; text-align: center; vertical-align: middle;
    font: 700 calc(var(--meg-cell) * .52) / 1 "Bricolage Grotesque", system-ui, sans-serif;
    color: #22303C; cursor: pointer; user-select: none;
}
.meg-sel { background: #B9E0F4; }
.meg-ok { background: #CFEBD8; color: #1B6B3A; }
.meg-myst { background: #FDF1CE; }

.meg-liste { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.meg-liste li { font: 600 12px/1 "Hanken Grotesk", system-ui, sans-serif; border: 1px solid #CFDDE4; border-radius: 100px; padding: 5px 9px; color: #22303C; }
.meg-liste li.trouve { background: #CFEBD8; border-color: #A9D9BB; color: #1B6B3A; text-decoration: line-through; }
.meg-compteur { font: 700 12.5px/1 "Hanken Grotesk", system-ui, sans-serif; color: #5A6470; margin: 0 0 8px; }
.meg-myst-zone { margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.meg-myst-zone[hidden] { display: none; }
.meg-revele { background: #FDE2C8; color: #7A4A12; }
.meg-myst-zone input { flex: 1 1 160px; min-width: 0; padding: 8px 10px; border: 1px solid #CFDDE4; border-radius: 10px; font: 700 16px/1 "Bricolage Grotesque", system-ui, sans-serif; letter-spacing: 2px; text-transform: uppercase; }
.meg-myst-zone button { border: 1px solid #2C8FC9; background: #2C8FC9; color: #fff; border-radius: 100px; padding: 8px 14px; font: 700 12.5px/1 "Hanken Grotesk", system-ui, sans-serif; cursor: pointer; }