/* =====================================================================
   style.css — 麻雀ソリティア（牌合わせ）ツール固有の微調整のみ。
   共通スタイルは /_shared/shirugear.css に任せる。
   ===================================================================== */

/* ツールバー */
.sg-mj-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 状況表示 */
.sg-mj-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 12px;
}
.sg-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}
.sg-stat__label {
  font-size: 0.72rem;
  color: var(--sg-muted, #777);
}
.sg-stat__value {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 盤面（横スクロール可・モバイル対応） */
.sg-mj-board-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px 10px;
}
.sg-mj-board {
  --cell: clamp(30px, 9.5vw, 46px);
  --gap: 3px;
  --lift: 6px;
  position: relative;
  margin: 0 auto;
}

/* 牌 */
.sg-mj-tile {
  position: absolute;
  width: var(--cell);
  height: calc(var(--cell) * 1.32);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--sg-border, #cfd4dd);
  border-radius: 6px;
  background: #fbfaf5;
  color: #1b1b1b;
  font-size: calc(var(--cell) * 0.82);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  transition: transform 0.06s ease, filter 0.12s ease;
}

/* 取れない（フリーでない）牌は暗く・操作不可の見た目 */
.sg-mj-tile--locked {
  cursor: default;
  filter: brightness(0.62) saturate(0.7);
}
.sg-mj-tile--locked::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: rgba(20, 24, 40, 0.28);
}

/* 取れる牌は明るく、ホバーで少し持ち上がる */
.sg-mj-tile--free:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.sg-mj-tile--free:active {
  transform: scale(0.97);
}

/* 選択中 */
.sg-mj-tile--selected {
  outline: 3px solid var(--sg-accent, #3b5bdb);
  outline-offset: -1px;
  filter: brightness(1.08);
  z-index: 50;
}

/* ヒント点滅 */
.sg-mj-tile--hint {
  animation: sg-mj-blink 0.5s ease-in-out 4;
  outline: 3px solid var(--sg-primary, #e8590c);
  outline-offset: -1px;
}
@keyframes sg-mj-blink {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.4); }
}

/* クリア/告知メッセージ */
.sg-mj-msg {
  margin-top: 12px;
  text-align: center;
  font-weight: 700;
  color: var(--sg-accent, #3b5bdb);
}

/* ダークテーマでも牌は白牌のまま（読みやすさ優先） */