h1 {
    text-align: center;
    color: #0056b3;
}

.wind-selection-section {
    display: flex;
    justify-content: flex-start; /* 左寄せに変更 */
    flex-wrap: wrap; /* 画面幅が狭い場合に折り返す */
    gap: 20px; /* ギャップを調整 */
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.wind-group h2 {
    color: #0056b3;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.wind-group {
    display: flex;
    flex-direction: column; /* Keep column for h2 and buttons group */
    align-items: center;
}

.wind-group .wind-buttons {
    display: flex;
    gap: 5px;
}

.wind-button {
    background-color: #6c757d; /* Default button color */
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    min-width: 50px;
    text-align: center;
    transition: background-color 0.3s ease;
}

.wind-button:hover {
    background-color: #5a6268;
}

.wind-button.selected {
    background-color: #007bff; /* Selected button color */
    font-weight: bold;
}

.wind-button.selected:hover {
    background-color: #0056b3;
}

/* トグルスイッチのスタイル */
.tile-selection-header span {
    font-weight: bold;
    color: #333;
}

/* トグルスイッチのスタイル */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px; /* スイッチ全体の幅 */
    height: 34px;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.toggle-switch input:checked + .slider {
    background-color: #2196F3;
}

.toggle-switch input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

.toggle-switch input:checked + .slider:before {
    transform: translateX(26px); /* スイッチの幅 - スライダーの幅 - 左右のパディング */
}

.main-container {
    display: flex;
    gap: 20px; /* セクション間のスペース */
    flex-wrap: wrap; /* 画面幅が狭い場合に折り返す */
}

.input-section {
    display: flex;
    flex-direction: column; /* 子要素を縦に並べる */
    gap: 20px; /* 子要素間のスペース */
    flex: 1; /* 待ち牌セクションよりも幅を狭く */
    min-width: 400px; /* 調整 */
}

.tile-selection-section {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tile-selection-header {
    display: flex;
    justify-content: flex-start; /* 左寄せに変更 */
    align-items: center;
    gap: 15px; /* タイトルとボタンの間にスペースを追加 */
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.tile-selection-section h2 {
    color: #0056b3;
    margin-top: 0;
    margin-bottom: 0; /* 親要素でpadding-bottomを設定するため、ここでは0に */
}

.waiting-tiles-section {
    flex: 1; /* 待ち牌セクションを広めに */
    min-width: 250px; /* 最小幅を調整 */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.waiting-tiles-section h2 {
    color: #0056b3;
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.suit-group {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px; /* 各牌種グループ間の余白 */
}

.tile-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    min-width: 60px;
    text-align: center;
    transition: background-color 0.3s ease;
}

.tile-button:hover {
    background-color: #45a049;
}

/* Specific colors for different suits (optional, but good for visual distinction) */
.manzu {
    background-color: #f44336; /* Red */
}
.manzu:hover {
    background-color: #da190b;
}

.pinzu {
    background-color: #2196F3; /* Blue */
}
.pinzu:hover {
    background-color: #0b7dda;
}

.souzu {
    background-color: #FFC107; /* Amber */
    color: #333;
}
.souzu:hover {
    background-color: #ffb300;
}

.jihai {
    background-color: #9C27B0; /* Purple */
}
.jihai:hover {
    background-color: #7b1fa2;
}

.current-hand-section {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.current-hand-section h2 {
    color: #0056b3;
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

#current-hand-container {
    display: flex;
    flex-wrap: wrap; /* 画面幅が狭い場合に手牌と副露のエリアを改行 */
    border: 1px dashed #ccc;
    min-height: 70px; /* 牌が0枚の時も1枚以上ある時と同じ縦幅にする */
    margin-bottom: 10px;
}

#hand-tiles-display {
    flex-grow: 1;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

#meld-tiles-display {
    flex-basis: auto; /* コンテンツに基づいて幅を決定 */
    overflow: hidden; /* はみ出たコンテンツを隠す */
    padding: 0; /* 初期状態ではパディング0 */
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    background-color: #f0f0f0; /* 副露エリアの背景色 */
    border-left: none; /* 区切り線 */
    transition: width 0.3s ease, padding 0.3s ease; /* アニメーション */
    visibility: hidden; /* 初期状態では非表示 */
    opacity: 0; /* 初期状態では透明 */
}

.tile-display-area {
    /* 既存のスタイルを維持 */
}

.meld-group {
    display: flex;
    border: 1px solid #a0a0a0; /* グループの境界線 */
    border-radius: 5px;
    padding: 3px;
    margin-right: 5px; /* グループ間の余白 */
    background-color: #e8e8e8;
}

.meld-options-popup {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 10px;
    z-index: 1000;
    display: none;
    flex-direction: column;
    gap: 8px;
    border-radius: 5px;
}

.meld-option-button {
    background-color: transparent;
    color: #333;
    padding: 5px 8px; /* パディングを元に戻す */
    border: 1px solid #ccc; /* 枠線を追加 */
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    display: flex; /* Flexboxコンテナにする */
    align-items: center; /* 垂直方向中央揃え */
    justify-content: center; /* 水平方向中央揃え */
    line-height: 0; /* 余分な行の高さを削除 */
}

.meld-option-button:hover {
    background-color: #f0f0f0;
    border-color: #999;
}

.displayed-tile {
    background-color: #e0e0e0;
    border: 1px solid #bbb;
    padding: 5px 8px;
    border-radius: 3px;
    font-size: 14px;
    white-space: nowrap;
}

.clear-button {
    background-color: #dc3545;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.clear-button:hover {
    background-color: #c82333;
}

.waiting-tile-group {
    width: 100%; /* 各グループが全幅を占めるように */
    margin-bottom: 10px; /* グループ間の余白 */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background-color: #f9f9f9;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.waiting-tiles-display-area {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
}

.waiting-tile-yaku {
    font-size: 0.9em;
    color: #555;
    text-align: left;
    white-space: pre-wrap;
    width: 100%;
}

.yakuman-display {
    color: #dc3545; /* 赤色 */
    font-weight: bold;
    background-color: #fff3cd; /* 薄い黄色 */
    padding: 2px 5px;
    border-radius: 3px;
}

/* --- 画像表示用のスタイル --- */

/* 牌画像のラッパー（枠線と余白を担当） */
.tile-image-wrapper {
    display: inline-block; /* インラインブロック要素として扱う */
    padding: 4px; /* 枠と画像の間の余白 */
    border: 1px solid #bbb; /* 枠線 */
    border-radius: 5px; /* 角丸 */
    background-color: #fff; /* 背景色を白に */
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* 軽い影 */
    cursor: pointer;
    line-height: 0; /* 画像下の余分なスペースを削除 */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tile-image-wrapper:hover {
    transform: scale(1.1);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

/* 手牌・副露牌として表示される画像の基本スタイル */
.displayed-tile-image {
    height: 40px; /* 牌の画像の高さを指定 */
    width: auto;
    vertical-align: middle; /* 画像がテキストと並んだ際の垂直位置を中央に */
    display: block; /* ブロック要素にして、ラッパー内で中央揃えしやすくする */
}

/* 待ち牌エリアの画像スタイル */
.waiting-tiles-display-area .tile-image-wrapper {
    padding: 3px;
    cursor: default;
}

.waiting-tiles-display-area .tile-image-wrapper:hover {
    transform: none;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.waiting-tiles-display-area .displayed-tile-image {
    height: 35px; /* 少し小さめに表示 */
}

/* 面子選択ポップアップ内の画像スタイル */
.meld-option-button img {
    height: 30px;
    margin: 0 2px;
    display: block; /* ブロック要素として扱う */
}

/* 副露ポップアップ内の牌の余白調整 */
.meld-option-button .tile-image-wrapper {
    padding: 4px; /* 上下左右の余白を統一 */
}

/* 牌選択ボタンのテキストを非表示にし、画像を表示するためのスタイル */
.tile-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    min-width: 40px; /* ボタンの最小幅 */
    height: 50px; /* ボタンの高さ */
}

.tile-button img {
    height: 100%;
    width: auto;
}

/* 牌選択ボタンのスタイルを手牌と合わせる */
.tile-button,
.tile-button.manzu,
.tile-button.pinzu,
.tile-button.souzu,
.tile-button.jihai {
    background-color: #fff; /* 背景を白に */
    border: 1px solid #bbb; /* 枠線を追加 */
    border-radius: 5px; /* 角丸 */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* アニメーション */
}

/* ホバー時のエフェクトも手牌と合わせる */
.tile-button:hover,
.tile-button.manzu:hover,
.tile-button.pinzu:hover,
.tile-button.souzu:hover,
.tile-button.jihai:hover {
    background-color: #fff; /* 背景色は変えない */
    transform: scale(1.1);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

/* 元のテキストは不要なので非表示に */
.tile-button span {
    display: none;
}

/* モバイル表示用のメディアクエリ */
@media (max-width: 768px) {
    h1 {
        font-size: 1.5em;
    }

    .main-container {
        flex-direction: column;
        gap: 15px;
    }

    .input-section {
        min-width: 0; /* min-widthをリセットして折り返しを許可 */
    }

    .wind-selection-section {
        flex-direction: column;
        align-items: stretch; /* 各グループの幅を揃える */
        gap: 15px;
    }

    .wind-group {
        width: 100%;
    }

    .wind-group h2 {
        text-align: center;
    }

    .wind-group .wind-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .tile-selection-section,
    .current-hand-section,
    .waiting-tiles-section {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 10px;
        box-sizing: border-box; /* paddingを幅に含める */
    }

    .tile-button {
        height: 40px; /* 牌選択ボタンの高さを調整 */
        min-width: 32px; /* 最小幅を調整 */
        padding: 3px;
    }

    #hand-tiles-display, #meld-tiles-display {
        gap: 3px; /* 手牌の牌同士のギャップを狭める */
    }

    .tile-image-wrapper {
        padding: 2px; /* 牌画像の余白を調整 */
    }

    .displayed-tile-image {
        height: 30px; /* 手牌の牌の画像を小さくする */
    }

    .waiting-tiles-display-area .displayed-tile-image {
        height: 28px; /* 待ち牌の画像を小さくする */
    }

    .meld-option-button img {
        height: 25px; /* 副露ポップアップ内の牌の画像を小さくする */
    }

    .clear-button {
        width: 100%; /* クリアボタンの幅を100%に */
        padding: 10px;
    }
}