/* games/mahjong-solitaire/style.css */

.mahjong-tip {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-bottom: 12px;
  max-width: 600px;
}

.mahjong-wrap {
  overflow-x: auto;
  padding: 12px;
  display: flex;
  justify-content: center;
}

/* 棋盤容器（相對定位，大小由 JS 動態設定） */
.mahjong-board {
  position: relative;
  flex-shrink: 0;
  /* isolation: isolate 建立新的 stacking context，
     讓子牌的高 z-index 不會溢出至頁面層級，
     避免麻將牌蓋住 modal overlay（z-index:1000）。 */
  isolation: isolate;
}

/* 麻將牌（絕對定位） */
.mahjong-tile {
  position: absolute;
  border-radius: 6px;
  border: 2px solid #bbb;
  background: linear-gradient(135deg, #fffef4 0%, #f5f0e0 100%);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1A1A1A;
  transition: transform 0.1s, box-shadow 0.1s;
  box-shadow: 3px 4px 6px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.8);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: "SimSun", "黑體", "Arial Unicode MS", var(--font-family);
  line-height: 1.2;
  text-align: center;
}

.tile-man    { color: #D4380D; }   /* 万 */
.tile-pin    { color: #1976D2; }   /* 筒 */
.tile-sou    { color: #388E3C; }   /* 條 */
.tile-honor  { color: #1A1A1A; font-weight: 900; } /* 字牌 */
.tile-flower { color: #B7135D; font-size: 85%; }   /* 花牌 */

/* 封鎖狀態 */
.mahjong-tile.blocked {
  background: linear-gradient(135deg, #e8e8e0 0%, #d8d8d0 100%);
  color: #999;
  cursor: default;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.10);
  filter: brightness(0.9);
}
.mahjong-tile.blocked .tile-man, .mahjong-tile.blocked .tile-pin,
.mahjong-tile.blocked .tile-sou, .mahjong-tile.blocked .tile-honor,
.mahjong-tile.blocked .tile-flower { color: #999; }

/* 空閒（可選）hover 效果 */
.mahjong-tile.free:hover {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, #fff9f0 0%, #ffedd6 100%);
  transform: translateY(-2px);
  box-shadow: 3px 6px 10px rgba(212,56,13,0.25), inset 0 1px 0 rgba(255,255,255,0.8);
}

/* 選中 */
.mahjong-tile.selected {
  border-color: var(--color-primary);
  background: #FFE58F !important;
  box-shadow: 0 0 0 3px var(--color-secondary), 3px 4px 8px rgba(0,0,0,0.18);
  transform: translateY(-3px) !important;
}

/* 可配對高亮 */
.mahjong-tile.matchable {
  border-color: var(--color-success);
  background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%) !important;
  animation: pulse-match 0.8s ease-in-out infinite alternate;
}

@keyframes pulse-match {
  from { box-shadow: 3px 4px 6px rgba(0,0,0,0.15), 0 0 0 2px var(--color-success); }
  to   { box-shadow: 3px 4px 6px rgba(0,0,0,0.15), 0 0 0 4px var(--color-success), 0 0 8px rgba(56,158,13,0.4); }
}