/* Sizes belong to the component. Hosts arrange tiles without restyling their faces. */
.mj-tile {
  display:inline-flex; position:relative; align-items:center; justify-content:center;
  box-sizing:border-box; width:42px; min-width:42px; height:63px; flex:0 0 auto;
  margin:0; padding:0; border:1px solid #ccd6c1; border-bottom:4px solid #a6bc96;
  border-radius:5px; background:#fffdf3; box-shadow:0 2px 3px #0002;
  overflow:hidden; vertical-align:middle; color:#254d39; isolation:isolate;
}
.mj-tile > .mj-tile-face { display:block; width:100%; height:100%; min-width:0; min-height:0; flex:none; overflow:hidden; pointer-events:none; }
.mj-tile--hand { width:48px; min-width:0; height:72px; }
.mj-tile--compact { width:32px; min-width:32px; height:48px; border-bottom-width:3px; border-radius:4px; }
.mj-tile--mini { width:24px; min-width:24px; height:36px; border-bottom-width:2px; border-radius:3px; box-shadow:0 1px 2px #0001; }
.mj-tile--thumbnail { width:20px; min-width:20px; height:30px; border-bottom-width:2px; border-radius:3px; box-shadow:none; }
.mj-tile--back { width:14px; min-width:14px; height:22px; border-bottom-width:3px; border-radius:3px; box-shadow:0 1px 2px #0001; }
.mj-tile-back { background:repeating-linear-gradient(45deg,#638361,#638361 3px,#769770 3px,#769770 6px); border-color:#d9e3ce; border-bottom-color:#4d6e4d; }
button.mj-tile { cursor:pointer; transition:transform .15s,border-color .15s; opacity:1; }
button.mj-tile:disabled { cursor:default; opacity:1; }
button.mj-tile:not(:disabled):hover { transform:translateY(-4px); border-color:#ca9b53; }
.mj-tile.selected { transform:translateY(-6px); outline:2px solid #d8983e; outline-offset:1px; background:#fff5d7; }
.mj-tile.drawn { border-color:#67916a; box-shadow:0 0 0 2px #61916b40,0 2px 3px #0002; }