/* Mahjong: ivory pieces on a framed felt table. */
body[data-game="mahjong"] .tilestage {
  background:
    radial-gradient(ellipse at center, #36594e66, transparent 72%),
    repeating-linear-gradient(115deg, #18372e 0 2px, #19382f 2px 5px);
  border-color: #6b7958;
  box-shadow:
    inset 0 0 0 5px #30263d,
    inset 0 0 38px #050b0b88;
}
body[data-game="mahjong"] .tileboard {
  padding: 8px;
  border: 3px solid #795b38;
  border-radius: 16px;
  gap: 8px;
  background: radial-gradient(ellipse at center, #376554, #254b3e);
  box-shadow:
    0 5px 0 #37291e,
    0 12px 24px #080b0a66,
    inset 0 0 0 2px #bd996a66,
    inset 0 0 28px #0a241955;
}
body[data-game="mahjong"] .tileboard button {
  padding: 4px;
  border: 3px solid #e7d3a9;
  border-radius: 9px;
  background: linear-gradient(145deg, #fffdf3 0%, #f7edda 56%, #e7d5b3 100%);
  box-shadow:
    inset 2px 2px 0 #fffef8,
    inset -2px -3px 0 #d1b98b,
    0 5px 0 #b3996c,
    0 8px 8px #08170f55;
}
body[data-game="mahjong"] .tile-face svg {
  transform: scale(1.06);
}
body[data-game="mahjong"] .tileboard button:not(.empty)::after {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #254f40;
  color: #fff6dc;
  content: "✓";
  font-size: 11px;
  line-height: 15px;
  font-weight: 900;
  box-shadow: 0 1px 2px #0005;
}
body[data-game="mahjong"] .tileboard button.miss {
  border: 3px dashed #afa895;
  background: linear-gradient(145deg, #e2e0d6, #c9c9c0);
  box-shadow:
    inset 1px 1px 0 #f3f1e8,
    inset -2px -3px 0 #a9a89a,
    0 3px 0 #8d8d7f,
    0 5px 6px #08170f44;
}
body[data-game="mahjong"] .tileboard button.miss::after {
  content: "";
  background: #514c59
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 7V5a3 3 0 016 0v2M4 7h8v6H4z' fill='none' stroke='%23fff6dc' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/13px 13px no-repeat;
}
body[data-game="mahjong"] .tileboard button.selected {
  border-color: #f6c454;
  outline: 3px solid #f6c454;
  outline-offset: 3px;
  box-shadow:
    inset 2px 2px 0 #fffdf4,
    inset -2px -3px 0 #d1b98b,
    0 5px 0 #b3996c,
    0 0 18px #f6c45466;
}
body[data-game="mahjong"] .tileboard button.hinted {
  outline: 3px solid #9ae1bd;
  outline-offset: 3px;
}
@media (min-height: 760px) and (max-width: 600px) {
  body[data-game="mahjong"] .tileboard {
    grid-template-columns: repeat(4, 64px);
  }
  body[data-game="mahjong"] .tileboard button {
    height: 90px;
  }
}
@media (min-height: 800px) and (min-width: 601px) {
  body[data-game="mahjong"] .tileboard {
    grid-template-columns: repeat(4, 78px);
    padding: 14px;
    gap: 9px;
  }
  body[data-game="mahjong"] .tileboard button {
    height: 110px;
  }
}
@media (max-height: 620px) {
  body[data-game="mahjong"] .tileboard {
    padding: 5px;
    gap: 6px;
    border-width: 2px;
  }
  body[data-game="mahjong"] .tileboard button {
    padding: 2px;
    border-width: 2px;
  }
  body[data-game="mahjong"] .tileboard button:not(.empty)::after {
    top: 2px;
    right: 2px;
    width: 13px;
    height: 13px;
    line-height: 13px;
    font-size: 10px;
  }
  body[data-game="mahjong"] .tile-face svg {
    transform: none;
  }
}