/* La face d'une tuile de Mahjong, telle que js/mahjong-tuiles.js la dessine. Chargé par
   les pages de jeu (avec plateau.css) et par les guides et articles, qui n'ont besoin
   que des tuiles d'illustration. */

.mj-face {
  display: block;
  width: 100%;
  height: 100%;
  font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', 'PMingLiU', 'MS Mincho', 'Hiragino Mincho ProN', serif;
  pointer-events: none;
}

.mj-face .mj-coin,
.mj-face .mj-gros text {
  font-family: 'Inter', system-ui, sans-serif;
}

/* Deux dessins par face : le traditionnel, ou le mode « gros caractères » */
.mj-face .mj-gros { display: none; }
.mj-gros-caracteres .mj-face .mj-art { display: none; }
.mj-gros-caracteres .mj-face .mj-gros { display: inline; }

/* --- Tuile d'illustration, dans un texte --- */
.mj-tuile-ex {
  display: inline-block;
  width: 42px;
  height: 56px;
  margin: 2px;
  border: 1px solid #b9a680;
  border-radius: 6px;
  background: #f6f0e2;
  box-shadow: 2px 2px 0 #cdbd97, 3px 3px 0 #a8956a;
  vertical-align: middle;
}

.mj-rangee-ex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 14px 0 18px;
}

/* Fleurs et saisons : un liseré de famille, parce qu'elles s'apparient sans se ressembler */
.mj-famille-fleur { box-shadow: inset 0 0 0 2px #c08a00, 2px 2px 0 #cdbd97, 3px 3px 0 #a8956a; }
.mj-famille-saison { box-shadow: inset 0 0 0 2px #3f74a8, 2px 2px 0 #cdbd97, 3px 3px 0 #a8956a; }

@media (max-width: 480px) {
  .mj-tuile-ex {
    width: 34px;
    height: 45px;
  }
}