/* mahjong.css に追加 */

/* mahjong.css に追加・変更 */

/* 牌の基本デザイン */
.mahjong-tile {
  width: 50px; /* 横幅 */
  height: 70px; /* 縦幅 */
  background: linear-gradient(to bottom, #ffffff 80%, #f0f0f0 100%);
  border: 1px solid #666;
  border-top: 2px solid #fff; /* 上からの光 */
  border-left: 2px solid #fff; /* 左からの光 */
  border-bottom: 2px solid #aaa; /* 影 */
  border-right: 2px solid #aaa; /* 影 */
  border-radius: 5px; /* 角丸 */
  box-shadow: 1px 1px 3px rgba(0,0,0,0.3), inset 0 0 5px rgba(0,0,0,0.05); /* 影と内側の光沢 */
  margin: 2px;
  display: inline-flex; /* 内部要素を中央揃え */
  justify-content: center;
  align-items: center;
  position: relative;
  vertical-align: bottom;
  font-family: 'Arial', 'Meiryo', sans-serif; /* フォント */
  box-sizing: border-box; /* padding/border をサイズに含める */
}

/* 裏向きの牌 */
.mahjong-tile.facedown {
  background: #00703c; /* 深緑 */
  border: 1px solid #555;
  border-top: 2px solid #008a4c;
  border-left: 2px solid #008a4c;
  border-bottom: 2px solid #005a30;
  border-right: 2px solid #005a30;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
.mahjong-tile.facedown .tile-pattern {
  display: none; /* 模様を隠す */
}

/* 模様を描画するエリア */
.tile-pattern {
  width: 90%;
  height: 90%;
  position: relative;
  display: flex; /* Flexbox で配置を制御 */
  flex-direction: column;
  justify-content: space-around; /* 均等配置 */
  align-items: center; /* 中央揃え */
}

/* --- 字牌 --- */
.suit-z .tile-pattern::before {
  font-size: 32px;
  font-weight: bold;
  color: #333;
}
.tile-z1 .tile-pattern::before { content: '東'; }
.tile-z2 .tile-pattern::before { content: '南'; }
.tile-z3 .tile-pattern::before { content: '西'; }
.tile-z4 .tile-pattern::before { content: '北'; }
/* 白 */
.tile-z5 .tile-pattern { border: 4px double #ccc; background: #fff; width: 70%; height: 80%; }
/* 發 */
.tile-z6 .tile-pattern::before { content: '發'; color: #008000; }
/* 中 */
.tile-z7 .tile-pattern::before { content: '中'; color: #cc0000; }

/* --- 筒子 (Pinzu) --- */
.suit-p .tile-pattern div {
  width: 10px; height: 10px;
  border-radius: 50%; /* 円 */
  background: radial-gradient(circle at 3px 3px, #fff, #c00); /* 立体感 */
  border: 1px solid #800;
}
/* 5筒 (Grid Layout を使った例) */
.tile-p5 .tile-pattern {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 70%; height: 70%;
  gap: 5px; /* 円の間隔 */
}
.tile-p5 .tile-pattern div:nth-child(1) { grid-area: 1 / 1; }
.tile-p5 .tile-pattern div:nth-child(2) { grid-area: 1 / 3; }
.tile-p5 .tile-pattern div:nth-child(3) { grid-area: 2 / 2; }
.tile-p5 .tile-pattern div:nth-child(4) { grid-area: 3 / 1; }
.tile-p5 .tile-pattern div:nth-child(5) { grid-area: 3 / 3; }
/* 赤5筒 */
.tile-p5.red-five .tile-pattern div { background: radial-gradient(circle at 3px 3px, #fff, #f00); border-color: #a00; }

/* --- 索子 (Souzu) --- */
.suit-s .tile-pattern div {
  width: 6px; height: 22px;
  background: linear-gradient(to right, #080 30%, #0a0 50%, #080 70%); /* 竹の節 */
  border: 1px solid #040;
  border-radius: 3px;
  margin: 1px 0;
}
/* 3索 (Flexbox を使った例) */
.tile-s3 .tile-pattern {
  justify-content: space-between; /* 上中下に配置 */
}
/* 1索 (鳥) は複雑なので、ここでは単純化 or 画像/SVG が望ましい */
.tile-s1 .tile-pattern::before {
  content: '🦜'; /* 絵文字で代用 (例) */
  font-size: 30px;
}

/* --- 萬子 (Manzu) --- */
.suit-m .tile-pattern {
  font-family: 'MS Mincho', 'SimSun', sans-serif; /* 漢字に適したフォント */
}
.suit-m .tile-pattern::before { /* 漢数字 */
  font-size: 28px;
  color: #333;
  font-weight: bold;
}
.suit-m .tile-pattern::after { /* 「萬」 */
  content: '萬';
  font-size: 22px;
  color: #c00;
  font-weight: normal;
}
.tile-m1 .tile-pattern::before { content: '一'; }
.tile-m2 .tile-pattern::before { content: '二'; }
/* ... (9まで) ... */
.tile-m9 .tile-pattern::before { content: '九'; }
/* 赤5萬 */
.tile-m5.red-five .tile-pattern::before { color: #f00; }
.tile-m5.red-five .tile-pattern::after { color: #f00; }

/* 捨て牌のサイズ調整 */
.mahjong-tile.discarded {
  width: 35px;
  height: 50px;
  font-size: 16px; /* 内部の文字も小さく */
}
.mahjong-tile.discarded .tile-pattern { transform: scale(0.7); } /* 模様も縮小 */

/* 自分の手牌でクリック可能な牌 */
.mahjong-tile.clickable {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mahjong-tile.clickable:hover {
  transform: translateY(-8px); /* 少し多めに持ち上げる */
  box-shadow: 2px 8px 10px rgba(0,0,0,0.5);
}

/* ツモってきた牌 (少し右にずらすなど) */
.mahjong-tile.tsumo-tile {
  margin-left: 15px;
}

/* 捨て牌のスタイル */
.discard-pile .mahjong-tile {
  width: 30px;
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  margin: 1px;
  cursor: default;
  float: left; /* 左から並べる */
}
.discard-pile .mahjong-tile:hover {
  transform: none;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

/* プレイヤーエリアの配置 (大まかな例) */
.player-area { position: absolute; }
.bottom { bottom: 10px; left: 50%; transform: translateX(-50%); }
.right { top: 50%; right: 10px; transform: translateY(-50%) rotate(-90deg); }
.top { top: 10px; left: 50%; transform: translateX(-50%) rotate(180deg); }
.left { top: 50%; left: 10px; transform: translateY(-50%) rotate(90deg); }

/* 捨て牌エリアのレイアウト */
.discard-pile {
  border: 1px solid #aaa;
  background: rgba(0,0,0,0.1);
  width: 192px; /* 30px * 6 + 1px * 12 */
  min-height: 92px; /* 45px * 2 + 1px * 4 */
  padding: 2px;
  margin-top: 10px;
}

/* 他プレイヤーの手牌 (裏向き表示の例) */
.player-area:not(.bottom) .mahjong-tile {
  background-color: #006400; /* 背面の色 */
  border-color: #ddd;
  color: transparent; /* 文字を隠す */
}

/* アクションボタンのスタイル */
#action-buttons {
  position: absolute;
  bottom: -80px; /* 卓の下あたり */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  padding: 10px;
  border-radius: 8px;
  display: flex;
  gap: 10px; /* ボタン間の隙間 */
}
.action-button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50; /* 緑 */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.action-button:hover {
  background-color: #45a049;
}
.action-button:last-child { /* パスボタンは赤くするなど */
  background-color: #f44336; /* 赤 */
}
.action-button:last-child:hover {
  background-color: #d32f2f;
}

/* 面子エリアと面子のスタイル */
.melds-area {
  display: flex; /* 面子を横に並べる */
  margin-bottom: 5px;
}
.meld {
  margin-right: 15px; /* 面子間の隙間 */
  background: #eee;
  padding: 3px;
  border-radius: 3px;
}
.meld .mahjong-tile {
  width: 35px;
  height: 50px;
  font-size: 16px;
  box-shadow: none; /* 面子は影を薄く */
  cursor: default;
}
/* TODO: 横向きの牌のスタイルを追加 */

/* チー選択肢のスタイル */
.chi-option {
  background-color: #555;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex; /* 内部の牌を横に並べる */
  align-items: center;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.chi-option:hover {
  border-color: #ff0; /* ホバーで強調 */
}
.chi-option .mahjong-tile {
  margin: 1px;
}

/* チーで鳴いた牌 (横向きにする例) */
.meld .mahjong-tile.called-chi {
  transform: rotate(90deg) translateX(10px); /* 横にして位置調整 */
  margin: 5px 10px; /* 周囲のマージン調整 */
}

/* ポンで鳴いた牌も横向きにするなら */
.meld .mahjong-tile.called-pon { /* JS側でクラス付与が必要 */
  transform: rotate(90deg) translateX(10px);
  margin: 5px 10px;
}


/* キャンセルボタン */
.action-button.cancel {
  background-color: #888;
}
.action-button.cancel:hover {
  background-color: #666;
}
/* カンボタンのスタイル */
.action-button.kan, .action-button.ankan {
  background-color: #ff9800; /* オレンジ */
}
.action-button.kan:hover, .action-button.ankan:hover {
  background-color: #f57c00;
}

/* 暗槓の裏向き牌 */
.meld .mahjong-tile.facedown {
  background: #555; /* 通常の裏向きより暗くするなど */
  border-color: #333;
}
/* ロンボタン */
.action-button.ron {
  background-color: #f44336; /* 赤 */
  color: white;
  font-weight: bold;
  border: 2px solid #b71c1c;
}
.action-button.ron:hover {
  background-color: #e53935;
}

.player-area.is-turn {
  border: 3px solid #ffd700; // 黄色い枠線
  box-shadow: 0 0 10px #ffd700;
}
.player-area.is-dealer::before {
  content: '親';
  position: absolute;
  top: -10px;
  left: -10px;
  background: #f00;
  color: #fff;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
}
.player-score, .player-wind {
    color: #fff;
    background: rgba(0,0,0,0.5);
    padding: 3px;
    margin-bottom: 5px;
    text-align: center;
    border-radius: 3px;
}