/**
 * 麻雀牌スタイル・立体感・アニメーション
 */

.tile {
  display: inline-block;
  position: relative;
  background-color: #fdfbf7;
  border-radius: 4px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 #c2b490;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform 0.12s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.12s ease;
  vertical-align: bottom;
  box-sizing: border-box;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* 自分の手牌（大サイズ・横画面でタップしやすい・URLバー有無に追従） */
.my-hand .tile {
  height: clamp(38px, 14dvh, 68px);
  aspect-ratio: 3 / 4;
  margin-right: clamp(1px, 0.3vw, 2px);
  border-radius: 3px;
}

/* 選択された手牌（上へポップアップ） */
.my-hand .tile.selected {
  transform: translateY(clamp(-14px, -3dvh, -8px));
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6), 0 0 10px rgba(245, 158, 11, 0.9);
  border: 2px solid #f59e0b;
}

/* ツモ牌（少し隙間を空けて右に配置） */
.my-hand .tile.tsumo-tile {
  margin-left: clamp(6px, 1.5vw, 14px);
}

/* 他家の手牌（伏せ牌） */
.opponent-hand .tile {
  height: clamp(20px, 6dvh, 30px);
  aspect-ratio: 3 / 4;
  margin: 1px;
}

.opponent-hand.left-hand .tile,
.opponent-hand.right-hand .tile {
  width: clamp(18px, 5dvh, 24px);
  aspect-ratio: 4 / 3;
  margin: 1px 0;
}

/* 捨て牌（河：6枚×3段が綺麗に収まる） */
.river-tile {
  display: inline-block;
  width: calc(100% / 6 - 2px);
  aspect-ratio: 3 / 4;
  background-color: #fdfbf7;
  border-radius: 2px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
  margin: 1px;
  position: relative;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.river-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 横向き牌 (リーチ宣言牌など) */
.river-tile.horizontal {
  aspect-ratio: 4 / 3;
}

/* 最新の捨て牌のハイライト */
.river-tile.latest-discard {
  box-shadow: 0 0 8px 3px #fbbf24, 0 3px 5px rgba(0, 0, 0, 0.5);
  animation: pulseGold 1.5s infinite;
}

@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 6px 2px #fbbf24; }
  50% { box-shadow: 0 0 12px 4px #f59e0b; }
}

/* 同種牌のハイライト（手牌で選択した牌と同じ牌が河で光るアシスト） */
.river-tile.same-tile-highlight {
  box-shadow: 0 0 6px 2px #38bdf8;
  filter: brightness(1.15);
}

/* 赤ドラの赤いドット印 */
.tile.red-dora::after,
.river-tile.red-dora::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 4px #ef4444;
}

/* 鳴き牌（副露） */
.open-meld {
  display: inline-flex;
  align-items: flex-end;
  margin-left: 6px;
  background: rgba(0, 0, 0, 0.2);
  padding: 2px 4px;
  border-radius: 4px;
}

.open-meld .tile {
  width: 3.8vw;
  max-width: 34px;
  aspect-ratio: 3 / 4;
  margin-right: 1px;
}

.open-meld .tile.horizontal {
  width: 4.8vw;
  max-width: 44px;
  aspect-ratio: 4 / 3;
}