/* ============================================================
   assets/style.css — CSS commun à toutes les apps Mahjong
   Préfixe BEM : .mahj-*  (évite les conflits avec le thème WordPress)
   ============================================================ */

/* ── Reset ciblé ────────────────────────────────────────────────────────────── */
.mahj-app *,
.mahj-app *::before,
.mahj-app *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Conteneur principal ────────────────────────────────────────────────────── */
.mahj-app {
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #222;
    max-width: 1100px;
    margin: 0 auto;
    background: #f5f5f5;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .10);
}

/* ── En-tête ────────────────────────────────────────────────────────────────── */
.mahj-entete {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.mahj-titre {
    font-size: 1.3rem;
    color: #1565c0;
}
.mahj-compteur {
    font-size: .85rem;
    color: #555;
    padding: 4px 12px;
    background: #e0e0e0;
    border-radius: 20px;
    white-space: nowrap;
}

/* ── Zone table de jeu ──────────────────────────────────────────────────────── */
.mahj-zone-main {
    background-color: #2d7a3a;
    background-image:
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, .03) 0px, rgba(255, 255, 255, .03) 1px,
            transparent 1px, transparent 8px),
        repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, .03) 0px, rgba(255, 255, 255, .03) 1px,
            transparent 1px, transparent 8px);
    border-radius: 10px;
    padding: 16px 16px 24px;
    margin-bottom: 20px;
    border: 2px solid #1e5f2e;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .25);
}

/* ── Vents ──────────────────────────────────────────────────────────────────── */
.mahj-vents {
    display: flex;
    gap: 32px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.mahj-vent-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.mahj-vent-label {
    color: #c8e6c9;
    font-size: .8rem;
    text-align: center;
    white-space: nowrap;
}
.mahj-vent-valeur {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}

/* ── Sections de tuiles (Exposés / Cachés) ──────────────────────────────────── */
.mahj-tuiles-section {
    border: 1.5px solid #a5d6a7;
    border-radius: 8px;
    padding: 10px 12px 12px;
    margin-bottom: 10px;
}
.mahj-tuiles-section:last-of-type {
    margin-bottom: 0;
}
.mahj-tuiles-label {
    font-size: .78rem;
    color: #fff;
    font-weight: 700;
    letter-spacing: .03em;
    margin-bottom: 8px;
}
.mahj-main-tuiles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
.mahj-tuiles-section--cachees .mahj-main-tuiles {
    min-height: 210px;
}
/* lecture_mains_attente affiche toutes les mains en statique (pas d'AJAX) :
   pas besoin de réserver de la hauteur pour éviter un saut de mise en page
   au changement de main, contrairement aux apps interactives ci-dessus. */
[data-app="lecture_mains_attente"] .mahj-tuiles-section--cachees .mahj-main-tuiles {
    min-height: 0;
}
/* Tuiles individuelles à plat (non groupées) : pas d'espace flex entre elles,
   seul le chevauchement natif de .mahj-tuile (margin-right: -30px) reste actif. */
.mahj-main-tuiles--plat {
    gap: 0;
}

/* ── Groupes de tuiles ──────────────────────────────────────────────────────── */
.mahj-groupe {
    display: flex;
    flex-direction: row;
    gap: 0;
    padding: 4px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
    align-items: flex-end;
}
.mahj-groupe--avec-fin {
    flex-direction: column;
    align-items: center;
}

.mahj-tuile-fin-haut {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 4px;
}
.mahj-groupe-bas {
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: flex-end;
}

/* ── Tuiles ─────────────────────────────────────────────────────────────────── */
.mahj-tuile {
    height: 92px;
    width: auto;
    margin-right: -30px;
    position: relative;
    z-index: 1;
}
.mahj-groupe-bas .mahj-tuile:last-child,
.mahj-groupe > .mahj-tuile:last-child {
    margin-right: 0;
}
.mahj-groupe .mahj-tuile:hover,
.mahj-groupe-bas .mahj-tuile:hover {
    z-index: 2;
}

/* Tuile gagnante */
.mahj-tuile--fin {
    margin-right: 0 !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6));
}
.mahj-tuile-fin--tiree .mahj-tuile--fin {
    height: 92px;
}
.mahj-tuile-fin--donnee .mahj-tuile--fin {
    transform: rotate(90deg);
    transform-origin: center center;
    height: 92px;
    margin-top: -20px;
    margin-bottom: -20px;
}

/* ── Boutons ────────────────────────────────────────────────────────────────── */
.mahj-btn {
    padding: 10px 22px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 600;
    transition: background .2s, transform .1s;
    text-decoration: none;
    display: inline-block;
    line-height: 1.4;
}
.mahj-btn:active { transform: scale(.97); }
.mahj-btn--sm    { padding: 5px 14px; font-size: .85rem; }

.mahj-btn--primary   { background: #1565c0; color: #fff; }
.mahj-btn--secondary { background: #e0e0e0; color: #333; }
.mahj-btn--success   { background: #1e5f2e; color: #fff; }
.mahj-btn--orange    { background: #C8A84B; color: #fff; }

.mahj-btn--primary:hover   { background: #0d47a1; color: #fff; }
.mahj-btn--secondary:hover { background: #bdbdbd; color: #333; }
.mahj-btn--success:hover   { background: #154a22; color: #fff; }
.mahj-btn--orange:hover    { background: #a8893a; color: #fff; }

/* ── Loader ─────────────────────────────────────────────────────────────────── */
.mahj-loader {
    text-align: center;
    color: #888;
    padding: 16px 0;
    font-size: .95rem;
}

/* ── Saisie réponse ─────────────────────────────────────────────────────────── */
.mahj-reponse-section {
    margin-top: 24px;
}
.mahj-reponse-label {
    display: block;
    margin-bottom: 10px;
    font-size: .95rem;
    color: #333;
}
.mahj-reponse-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.mahj-reponse-row input[type="number"] {
    width: 120px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 2px solid #ccc;
    background: #fff;
    color: #222;
    font-size: 1.1rem;
    outline: none;
    transition: border .2s;
}
.mahj-reponse-row input[type="number"]:focus {
    border-color: #1565c0;
}

/* ── Résultat vérification ──────────────────────────────────────────────────── */
.mahj-resultat {
    margin-top: 14px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
}
.mahj-resultat--correct {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}
.mahj-resultat--proche {
    background: #fff8e1;
    color: #e65100;
    border: 1px solid #ffcc80;
}
.mahj-resultat--faux {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

/* ── Solution ───────────────────────────────────────────────────────────────── */
.mahj-solution-box {
    margin-top: 20px;
    padding: 18px;
    background: #2e7d32;
    border-radius: 8px;
    border-left: 4px solid #1b5e20;
}
.mahj-solution-valeur {
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
}
.mahj-solution-liste {
    list-style: none !important;
    padding: 0;
    margin: 0;
}
/* Beaucoup de thèmes WordPress stylent « .entry-content ul / li » (spécificité 0,1,1),
   ce qui bat le reset « .mahj-app * » (0,1,0) et rajoute une marge sous la liste /
   sous chaque <li> → gros vide en bas de l'encart solution. On re-neutralise ici
   avec une spécificité + !important qui passent devant le thème. */
.mahj-app ul.mahj-solution-liste,
.mahj-app .mahj-solution-liste li {
    margin: 0 !important;
}
.mahj-solution-liste li {
    list-style: none !important;
    padding: 0;
}
.mahj-solution-liste li::marker {
    content: none;
}
.mahj-solution-liste li {
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.6;
    padding: 3px 0 3px 16px;
    position: relative;
}
.mahj-solution-liste li::before {
    content: '·';
    position: absolute;
    left: 4px;
    color: #a5d6a7;
    font-weight: bold;
}

/* ── Signalement ────────────────────────────────────────────────────────────── */
.mahj-signalement-bouton {
    margin-top: 16px;
}
.mahj-form-group {
    margin-bottom: 12px;
}
.mahj-form-group label {
    display: block;
    font-size: .85rem;
    color: #555;
    margin-bottom: 4px;
}
.mahj-form-group input,
.mahj-form-group textarea {
    width: 100%;
    padding: 9px 13px;
    border-radius: 6px;
    border: 1.5px solid #ccc;
    background: #fff;
    color: #222;
    font-size: .9rem;
    outline: none;
    transition: border .2s;
}
.mahj-form-group input:focus,
.mahj-form-group textarea:focus {
    border-color: #1565c0;
}
.mahj-form-group textarea {
    resize: vertical;
    min-height: 80px;
}
.mahj-signalement-retour {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: .9rem;
    font-weight: 600;
}
.mahj-signalement-retour--ok    { background: #e8f5e9; color: #2e7d32; }
.mahj-signalement-retour--erreur { background: #ffebee; color: #c62828; }

/* ── Crédit tuiles ──────────────────────────────────────────────────────────── */
.mahj-credit-tuiles {
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
    background: #eeeeee;
    font-family: inherit;
    font-size: .9rem;
    color: #444;
    line-height: 1.5;
}
.mahj-credit-tuiles a {
    color: #1565c0;
    font-weight: 600;
    text-decoration: none;
}
.mahj-credit-tuiles a:hover {
    text-decoration: underline;
}

/* Honeypot : caché visuellement mais présent dans le DOM */
.mahj-hp {
    position: absolute;
    left: -9999px;
    visibility: hidden;
    pointer-events: none;
}

/* ── Bouton nouvelle main ───────────────────────────────────────────────────── */
.mahj-btn-aleatoire-section {
    margin-top: 20px;
}

/* ── Utilitaires responsive show/hide ──────────────────────────────────────── */
@media (max-width: 600px)  { .mahj--desktop-only { display: none !important; } }
@media (min-width: 601px)  { .mahj--mobile-only  { display: none !important; } }

/* ── Responsive — portrait mobile ───────────────────────────────────────────── */
@media (max-width: 600px) {
    .mahj-app             { padding: 8px; }
    .mahj-entete          { margin-bottom: 10px; }
    .mahj-zone-main       { padding: 8px 8px 12px; margin-bottom: 10px; }
    .mahj-vents           { gap: 10px; margin-bottom: 12px; }
    .mahj-tuiles-section  { padding: 6px 8px 8px; margin-bottom: 6px; }
    .mahj-tuile           { height: 44px; margin-right: -14px; }
    .mahj-main-tuiles     { gap: 4px; }
    .mahj-tuiles-section--cachees .mahj-main-tuiles { min-height: 100px; }
    .mahj-reponse-row     { flex-direction: column; align-items: flex-start; }

    /* identification_attentes : boutons Vérifier + Solution côte à côte */
    .ia-reponse-header              { flex-direction: column; align-items: stretch; }
    .ia-reponse-header .mahj-reponse-row { flex-direction: row; flex-wrap: wrap; }
    .ia-reponse-header .mahj-btn     { flex: 1 1 auto; text-align: center; }
    /* Bouton mobile Main aléatoire pleine largeur */
    .mahj-btn-aleatoire-section .mahj-btn { width: 100%; }

    /* Tuile gagnante : même hauteur que les autres */
    .mahj-tuile-fin--tiree .mahj-tuile--fin,
    .mahj-tuile-fin--donnee .mahj-tuile--fin { height: 44px; }
    .mahj-tuile-fin--donnee .mahj-tuile--fin { margin-top: -6px; margin-bottom: -6px; }
}

/* ── Responsive — paysage mobile ────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
    .mahj-app             { padding: 6px; }
    .mahj-entete          { margin-bottom: 6px; }
    .mahj-zone-main       { padding: 6px 6px 8px; margin-bottom: 6px; }
    .mahj-vents           { gap: 8px; margin-bottom: 8px; }
    .mahj-vent-label      { font-size: .7rem; }
    .mahj-vent-valeur     { font-size: .85rem; }
    .mahj-tuiles-section  { padding: 4px 6px 6px; margin-bottom: 4px; }
    .mahj-tuile           { height: 36px; margin-right: -12px; }
    .mahj-main-tuiles     { gap: 3px; }
    .mahj-tuiles-section--cachees .mahj-main-tuiles { min-height: 80px; }
    .mahj-reponse-row     { flex-direction: column; align-items: flex-start; }

    /* identification_attentes : tous les boutons sur une seule ligne en paysage */
    .ia-reponse-header              { flex-wrap: nowrap; align-items: center; }
    .ia-reponse-header .mahj-reponse-row { flex-direction: row; flex-wrap: nowrap; gap: 6px; }
    .ia-reponse-header .mahj-reponse-label { white-space: nowrap; font-size: .8rem; }
    .ia-reponse-header .mahj-btn     { padding: 7px 12px; font-size: .8rem; white-space: nowrap; }

    /* Tuile gagnante en paysage */
    .mahj-tuile-fin--tiree .mahj-tuile--fin,
    .mahj-tuile-fin--donnee .mahj-tuile--fin { height: 36px; }
    .mahj-tuile-fin--donnee .mahj-tuile--fin { margin-top: -5px; margin-bottom: -5px; }
}

/* ── App lecture_mains ──────────────────────────────────────────────────────── */
/* À ajouter à la fin de style.css                                              */

/* Carte par main */
.mahj-lecture-main {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 28px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    overflow: hidden;
}

/* Numéro */
.mahj-lecture-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: #1e5f2e;
    color: #fff;
}
.mahj-lecture-id {
    font-size: 1rem;
    font-weight: 700;
    background: rgba(255,255,255,.15);
    border-radius: 6px;
    padding: 2px 10px;
    white-space: nowrap;
}
/* Corps : plateau | solution */
.mahj-lecture-corps {
    display: flex;
    gap: 0;
    align-items: stretch;
}
.mahj-lecture-plateau {
    flex: 1 1 auto;
    padding: 16px;
    min-width: 0;
}
.mahj-lecture-plateau .mahj-zone-main {
    margin-bottom: 0;
}

/* Solution à droite */
.mahj-lecture-solution {
    flex: 0 0 240px;
    border-left: 2px solid #e0e0e0;
    padding: 16px;
    background: #f9f9f9;
    display: flex;
    align-items: flex-start;
}
.mahj-solution-box--visible {
    display: block !important; /* override le display:none du JS */
    width: 100%;
}

/* Solution box en gris dans lecture_mains (override du vert par défaut) */
.mahj-lecture-solution .mahj-solution-box {
    background: #eeeeee;
    border-left: 4px solid #bdbdbd;
}
.mahj-lecture-solution .mahj-solution-valeur {
    color: #1e5f2e;
}
.mahj-lecture-solution .mahj-solution-liste li {
    color: #333;
    padding-left: 0;
}
.mahj-lecture-solution .mahj-solution-liste li::before {
    content: none;
}


/* Pagination */
.mahj-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #ddd;
}
.mahj-pagination-info {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.mahj-pagination-info a {
    color: #1565c0;
    text-decoration: none;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}
.mahj-pagination-info a:hover {
    background: #e3f2fd;
}
.mahj-pagination-active {
    color: #1e5f2e;
    font-size: 1.05rem;
}
.mahj-pagination--entete {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    margin-left: auto;
    justify-content: flex-end;
}

/* Bouton signalement dans la colonne solution */
.mahj-lecture-solution {
    flex-direction: column;
    gap: 12px;
}
.mahj-btn-ouvrir-signalement {
    align-self: flex-start;
    white-space: nowrap;
    text-transform: none;
}

/* Responsive : plateau au-dessus, solution en dessous */
@media (max-width: 700px) {
    .mahj-lecture-corps     { flex-direction: column; }
    .mahj-lecture-solution  { flex: none; border-left: none; border-top: 2px solid #e0e0e0; }
}

/* ── App : identification_attentes ──────────────────────────────────────────── */

/* Main du joueur : overlap natif + retour à la ligne */
#ia-cachees {
    min-height: 0;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0;
    overflow: hidden;
}
#ia-cachees .mahj-tuile {
    flex-shrink: 0;
}

/* Conteneur flex-column : cartouche en premier (mobile-first),
   header remonte via order sur écran large */
#ia-reponse-section {
    display: flex;
    flex-direction: column;
}
@media (min-width: 601px) {
    #ia-reponse-section .ia-reponse-header { order: -1; }
    /* Sur desktop il y a la place : le libellé reste sur une seule ligne. */
    .ia-reponse-header .mahj-reponse-label { white-space: nowrap; }
}

/* Ligne label + boutons d'action */
.ia-reponse-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.ia-reponse-header .mahj-reponse-label {
    margin: 0;
    /* white-space: nowrap uniquement en desktop, voir @media (min-width: 601px)
       ci-dessus — en dessous, le libellé (trop long pour tenir sur une ligne)
       doit pouvoir revenir à la ligne, sinon il fait déborder toute la page. */
}
.ia-reponse-header .mahj-reponse-row {
    margin: 0;
}

/* Cartouche de réponse */
.ia-cartouche {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 52px;
    padding: 8px 12px;
    background: #f5f5f5;
    border: 2px dashed #bdbdbd;
    border-radius: 8px;
    margin-bottom: 12px;
    align-items: center;
}
.ia-cartouche:empty::before {
    content: 'Aucune tuile sélectionnée';
    color: #aaa;
    font-size: .85rem;
    font-style: italic;
}
.ia-cartouche-tuile {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    line-height: 0;
    outline: none;
}
.ia-cartouche-tuile:focus-visible {
    outline: none;
}
.ia-cartouche-tuile .mahj-tuile {
    margin-right: 0;
    transition: opacity .15s;
}
.ia-cartouche-tuile:hover .mahj-tuile {
    opacity: .5;
}
.ia-cartouche-tuile::after {
    content: '×';
    position: absolute;
    top: -5px;
    right: -5px;
    background: #e53935;
    color: #fff;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

/* Nouvel item cartouche avec options */
.ia-cartouche-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    padding: 6px 8px 8px;
}
.ia-cartouche-item-top {
    position: relative;
    display: flex;
    align-items: center;
}
.ia-cartouche-item-top .mahj-tuile {
    margin-right: 0;
}
.ia-cartouche-remove {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #e53935;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}
.ia-cartouche-remove:hover {
    background: #b71c1c;
}
.ia-cartouche-options {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
}
.ia-cartouche-options label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
}
.ia-cartouche-options input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    accent-color: #1565c0;
}

/* Neutralise l'overlap (-30px) hors contexte groupe */
.mahj-vent-item .mahj-tuile,
.ia-tuile-picker-btn .mahj-tuile { margin-right: 0; }

/* Sélecteur de tuiles */
.ia-tuile-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
    margin-bottom: 16px;
}
.ia-tuile-picker-famille {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ia-tuile-picker-label {
    font-size: .75rem;
    color: #888;
    width: 72px;
    flex-shrink: 0;
}
.ia-tuile-picker-tuiles {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.ia-tuile-picker-btn {
    background: none;
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 1px;
    cursor: pointer;
    transition: border-color .15s, transform .1s;
    line-height: 0;
    outline: none;
}
.ia-tuile-picker-btn:hover {
    transform: scale(1.08);
}
.ia-tuile-picker-btn--selected {
    border-color: transparent;
    background: none;
}
.ia-tuile-picker-btn .mahj-tuile {
    display: block;
}

/* Premier <li> de la solution : tuiles sans puce */
.ia-solution-tuiles-li {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    padding-left: 0 !important;
    margin-bottom: 8px;
}
.ia-solution-tuiles-li::before { display: none; }
.ia-solution-tuiles-li .mahj-tuile { margin-right: 0; }

/* Item tuile + label de mode dans la solution */
.ia-solution-attente-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.ia-solution-attente-labels {
    font-size: .7rem;
    color: #c8e6c9;
    text-align: center;
    white-space: nowrap;
}

/* ── Modale signalement (lecture_mains) ─────────────────────────────────────── */
.mahj-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mahj-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
    width: min(480px, 92vw);
    max-height: 90vh;
    overflow-y: auto;
}
.mahj-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #eee;
}
.mahj-modal-header h3 {
    font-size: 1rem;
    color: #444;
    margin: 0;
}
.mahj-modal-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: #888;
    line-height: 1;
    padding: 0 4px;
}
.mahj-modal-close:hover { color: #333; }
.mahj-modal-body {
    padding: 18px 22px 22px;
}

/* Bloc tuiles attendues — grille plutôt que flex-wrap : les items n'ont pas tous
   la même largeur (avec ou sans libellé sous la tuile), donc en flex-wrap les
   tuiles ne s'alignaient pas verticalement d'une ligne à l'autre — que la
   colonne solution soit étroite (PC, à droite du plateau) ou pleine largeur
   (mobile, sous le plateau). En grille, chaque colonne a une largeur fixe :
   les tuiles s'alignent, et le texte reste centré sous chacune. */
.mahj-lma-attentes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.mahj-lma-attente-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.mahj-lma-attente-item .mahj-tuile {
    height: 52px;
    margin-right: 0;
}
.mahj-lma-attente-mode {
    font-size: .75rem;
    color: #444;
    font-style: italic;
    text-align: center;
}

/* ── État "main non valide" (< 8 points) — commun aux apps utilisant hands.json ── */
/* Placé en fin de fichier pour primer sur les règles de base et celles de
   lecture_mains (même spécificité, l'ordre de cascade tranche). */
.mahj-solution-box--invalide {
    background: #eeeeee;
    border-left-color: #bdbdbd;
}
.mahj-solution-box--invalide .mahj-solution-valeur {
    color: #c62828;
}
.mahj-solution-box--invalide .mahj-solution-liste li {
    color: #333;
    padding-left: 0;
}
.mahj-solution-box--invalide .mahj-solution-liste li::before {
    content: none;
}

/* ── App : calcul_ecart ────────────────────────────────────────────────────── */

/* Cette app est plus courte que les autres (pas de picker de tuiles, pas
   d'encart crédit) : sur une page où elle arrive juste avant le footer, le
   fond très clair de .mahj-app (#f5f5f5) contre le blanc de la page se voit
   à peine, et le contraste brutal avec un footer sombre juste après donne
   l'impression que la carte est coupée net en bas. On ajoute de l'espace
   après la carte pour que le fond blanc de la page s'intercale nettement. */
[data-app="calcul_ecart"] {
    margin-bottom: 48px;
}

/* Feuille de scores : toujours 4 joueurs sur une seule ligne, y compris mobile
   (nowrap + flex-shrink + libellés courts "J1" plutôt que "Joueur 1"). */
.ce-scores-ligne {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}
.ce-score-joueur {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    border: 1.5px solid rgba(255, 255, 255, .25);
}
.ce-score-nom {
    font-size: .78rem;
    font-weight: 700;
    color: #c8e6c9;
    letter-spacing: .02em;
    text-align: center;
    white-space: nowrap;
}
.ce-score-valeur {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
}
@media (max-width: 600px) {
    .ce-scores-ligne  { gap: 4px; }
    .ce-score-joueur  { padding: 8px 2px; gap: 3px; }
    .ce-score-nom     { font-size: .6rem; }
    .ce-score-valeur  { font-size: 1.05rem; }
}