/* Porcelain & jade: a shared, scalable illustrated set. Load after page styles. */
.mj-tile-art {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 1 auto;
  width: 82%;
  height: 70%;
  max-width: 100%;
  max-height: 74%;
  overflow: hidden;
  pointer-events: none;
}
.tile-face > .mj-tile-art,
.hero-tile-face > .mj-tile-art,
.mini-tile-face > .mj-tile-art { margin-top: 5%; }
.tile-face > .mj-tile-art + small { margin-top: 1%; }
.hero-tile-face > .mj-tile-art { width: 84%; height: 74%; }
.mini-tile-face > .mj-tile-art { width: 84%; height: 72%; }
.tile-preview .tile-face > .mj-tile-art { width: 82%; height: 68%; }
.mj-mini-art .tile-face > .mj-tile-art { width: 86%; height: 80%; max-height: 82%; }
.mj-tile-art :is(path, circle, text) { filter: none; }

/* Opt in on a page, rack, or tile. These properties do not replace selection,
   focus, drawn-tile, blind-pass, or drag states supplied by the owning page. */
.mj-tile-theme :is(.tile-face, .hero-tile-face, .mini-tile-face),
.mj-tile-theme:is(.game-tile, .practice-tile, .hero-tile, .mini-tile) :is(.tile-face, .hero-tile-face, .mini-tile-face) {
  border-color: #c3b99e;
  background: linear-gradient(130deg, #fffefa 0%, #fffaf0 51%, #f3ead7 100%);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -2px 1px #d9ccab40;
}
.mj-tile-theme :is(.tile-face, .hero-tile-face, .mini-tile-face)::after,
.mj-tile-theme:is(.game-tile, .practice-tile, .hero-tile, .mini-tile) :is(.tile-face, .hero-tile-face, .mini-tile-face)::after {
  inset: 3px;
  border: 1px solid #bfa26324;
  border-radius: 3px;
  background: none;
  opacity: 1;
}
.mj-tile-theme :is(.game-tile, .practice-tile):not(.is-blind),
.mj-tile-theme:is(.game-tile, .practice-tile):not(.is-blind) {
  background: linear-gradient(125deg, #d9e9de, #82b49e);
}
.mj-tile-theme :is(.tile-corner, .hero-tile-corner),
.mj-tile-theme:is(.game-tile, .practice-tile, .hero-tile) :is(.tile-corner, .hero-tile-corner) {
  color: #151b17;
  background: #fffaf0f2;
  text-shadow: 0 1px 0 white;
}
.mj-tile-theme :is(.tile-face, .hero-tile-face, .mini-tile-face) > small { color: #40574b; }
@media (forced-colors: active) {
  .mj-tile-art { forced-color-adjust: none; }
  .mj-tile-theme :is(.tile-face, .hero-tile-face, .mini-tile-face) { border: 1px solid CanvasText; }
}
@media print {
  .mj-tile-art { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}