/* ---------- 麻将牌 ---------- */
.tile {
  --tw: var(--tile-w, 44px);
  position: relative;
  flex: none;
  width: var(--tw);
  height: calc(var(--tw) * 1.34);
  border: 1px solid #ddd2b4;
  border-radius: calc(var(--tw) * 0.14);
  background: linear-gradient(180deg, #fffef9 0%, #f6efdc 70%, #ece2c6 100%);
  box-shadow:
    0 calc(var(--tw) * 0.07) 0 #23875e,
    0 calc(var(--tw) * 0.07 + 1px) 0 #145c3f,
    0 calc(var(--tw) * 0.16) calc(var(--tw) * 0.22) rgba(0, 0, 0, 0.35);
  user-select: none;
  -webkit-user-select: none;
  transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast);
}

.tile svg {
  position: absolute;
  top: 5%;
  left: 7%;
  width: 86%;
  height: 90%;
}

.tile text {
  font-family: var(--font-display);
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: central;
}

.tile-num,
.tile-wan {
  font-size: 13px;
}

.tile-honor {
  font-size: 21px;
}

.tile.mini {
  --tw: var(--mini-tile-w, 24px);
}

.tile-back {
  border-color: #2a9467;
  background: linear-gradient(160deg, #3dbb85, #1f7a55);
}

.tile.is-last {
  box-shadow:
    0 0 0 2px var(--brass-soft),
    0 calc(var(--tw) * 0.07) 0 #23875e,
    0 0 16px rgba(240, 211, 141, 0.6);
}

/* ---------- 我的手牌 ---------- */
.mj-hand {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-3);
  padding: 22px var(--space-4) max(var(--space-3), env(safe-area-inset-bottom));
}

.mj-hand-tiles {
  display: flex;
  gap: 2px;
}

.mj-hand-tiles .tile {
  cursor: pointer;
}

.mj-hand-tiles .tile.is-drawn {
  margin-left: calc(var(--tile-w) * 0.4);
}

@media (hover: hover) {
  .mj-hand-tiles .tile:hover {
    transform: translateY(-5px);
  }
}

.mj-hand-tiles .tile.is-selected {
  transform: translateY(-16px);
  box-shadow:
    0 0 0 2px var(--brass),
    0 calc(var(--tw) * 0.07) 0 #23875e,
    0 14px 22px rgba(0, 0, 0, 0.4);
}

.mj-hand.can-discard .tile.is-selected::after {
  content: '再点打出';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--lacquer);
  color: var(--brass-soft);
  font-size: 11px;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.mj-my-melds,
.mj-melds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mj-my-melds .tile {
  --tw: calc(var(--tile-w) * 0.62);
}

.meld {
  display: flex;
  gap: 1px;
  padding: 3px 3px 5px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
}

/* ---------- 牌河 ---------- */
.mj-zone {
  min-height: calc(var(--mini-tile-w) * 1.5);
}

.mj-river {
  display: grid;
  grid-template-columns: repeat(6, var(--mini-tile-w));
  gap: 5px 2px;
}

.pos-right .mj-river {
  direction: rtl;
}

.pos-left .mj-melds {
  justify-content: flex-start;
}

.pos-right .mj-melds {
  justify-content: flex-end;
}

/* ---------- 中央 ---------- */
.mj-center {
  min-width: 150px;
}

.mj-wall {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.mj-wall b {
  color: var(--brass-soft);
  font-family: var(--font-rank);
  font-size: 2.2rem;
  line-height: 1;
}

.mj-wall small {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.mj-last {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.mj-last .tile {
  animation: play-in 360ms var(--ease-out-expo);
}

.mj-winning {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  margin: var(--space-2) 0;
}

.mj-winning .mj-river {
  display: flex;
  gap: 2px;
}

.mj-zone.is-revealed .mj-river {
  grid-template-columns: repeat(7, var(--mini-tile-w));
}

/* 大厅里的麻将玩法卡片做成一张牌的样子 */
.pick .card.is-tile {
  border-color: #ddd2b4;
  background: linear-gradient(180deg, #fffef9 0%, #f6efdc 70%, #ece2c6 100%);
  box-shadow: 0 7px 0 #23875e, 0 8px 0 #145c3f, 0 14px 24px rgba(0, 0, 0, 0.35);
}

@media (max-width: 720px) {
  .mj-river {
    grid-template-columns: repeat(6, var(--mini-tile-w));
  }

  .game-mahjong .seat-plate .seat-score {
    display: none;
  }
}