/* ページ全体の横スクロールは出さない（背景色切れ防止） */
html, body { overflow-x: clip; }

/* スクロール容器：JSで max-width(px) を流し込む。フォールバック 980px */
.table-scroll {
  --ts-max: 980px;
  max-width: var(--ts-max);
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

/* テーブルは内容幅で広がる（親を超えられるように） */
.table-scroll > table {
  width: max-content;         /* ←重要：内容幅 */
  max-width: none;
  white-space: nowrap;        /* 折り返しで縮まない */
  border-collapse: collapse;
}

.table-hensei {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
}

table,
th,
td {
    border: 1px solid #ddd;
}

th,
td {
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
    text-align: center;
}

/* ドラッグ中の行に適用するスタイル */
table.dragdrop tbody tr.dragging {
    background-color: #f0f0f0;
}

/* キャラクター列の最大幅を設定 */
th[data-column="character"],
td[data-column="character"] {
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

th[data-column="character-name"],
td[data-column="character-name"] {
    min-width: 170px;
    max-width: 170px;
    display: none;
}

th[data-column="rune"],
td[data-column="rune"] {
    max-width: 90px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

th[data-column="speed"],
td[data-column="speed"] {
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

th[data-column="action-order"],
td[data-column="action-order"] {
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

th[data-column="zokusei"],
td[data-column="zokusei"] {
    width: 30px;
}

th[data-column="character-list"],
td[data-column="character-list"] {
    text-overflow: ellipsis;
    flex-wrap: wrap;
}

/* タブ全体をテーブルに合わせるスタイル */
.tab-container {
    overflow-x: auto;
    display: inline-block;
    /* タブコンテナをブロック要素として表示 */
    width: fit-content;
    /* タブコンテナの幅を内容に合わせる */
    max-width: 100%;
    /* 幅がコンテンツの幅を超えないようにする */
}

/* 未選択のタブボタンのデフォルトスタイル */
.tab-button {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(to bottom, #9bb2d9, #7a9ac9);
    /* 以前より薄い青系のグラデーション */
    color: #fff;
    /* テキストの色を白に設定 */
    transition: background 0.3s, color 0.3s;
    /* スムーズなホバーアニメーション */
    cursor: pointer;
}

/* タブボタンのアクティブ状態のスタイル */
.tab-button.active {
    background: linear-gradient(to bottom, #3b5998, #5d77b0);
    /* 基準色を使った青系のグラデーション */
    color: #fff;
    /* テキストの色を白に設定 */
}

/* 未選択のタブにホバーしたときのスタイル */
.tab-button:not(.active):hover {
    background: linear-gradient(to top, #3b5998, #5d77b0);
    /* 基準色を使った逆方向のグラデーション */
    color: #fff;
    /* テキストの色を白に設定 */
}


.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* チェックボックスとラベルの位置を調整 */
input[type="checkbox"] {
    vertical-align: middle;
    /* チェックボックスを垂直方向に中央揃え */
}

label {
    display: inline-block;
    /* ラベルをブロック要素として表示 */
    width: 120px;
    /* 固定幅を設定（キャラ名が最大8文字と仮定） */
    text-align: left;
    /* テキストを左寄せ */
    vertical-align: middle;
    /* ラベルを垂直方向に中央揃え */
}

/* モーダルのスタイル */
.modal {
    display: none;
    /* 初めは非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* モーダルの背景色と透明度 */
    z-index: 1;
    /* モーダルを他の要素の上に表示 */
    overflow: auto;
    /* モーダル内のコンテンツが画面に収まらない場合、スクロールバーを表示 */
}

.modal-content {
    background-color: #fff;
    margin: 10px 50px 50px 50px;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    /* モーダルの幅 */
}

/* inputエリアのスタイル（幅は別で） */
.inputErea {
    padding: 10px;
    border: 1px solid #ccc;
    /* ボーダー */
    border-radius: 5px;
    /* 角丸 */
    font-size: 16px;
    /* フォントサイズ */
    outline: none;
    /* フォーカス時の枠線を削除 */
    transition: border-color 0.3s;
    /* ボーダーの色にトランジションを追加 */
}

/* フォーカス時のスタイル */
.inputErea:focus {
    border-color: #007bff;
    /* フォーカス時のボーダーの色を変更 */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    /* フォーカス時の影を追加 */
}

.party-name {
    width: 200px;
}

.speed-rune-input {
    width: 50px;
}

.success-message {
    color: red;
    display: none;
    transition: opacity 1s;
}

#choice-character-icons {
    display: flex;
    flex-wrap: wrap;
    /* 幅がいっぱいになったら改行 */
}

.choice-character-icon {
    display: inline-block;
    margin-right: 10px;
    position: relative;
}

.choice-character-icon:hover {
    cursor: pointer;
}

.order-badge {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    padding: 5px 10px;
    border-radius: 50%;
    font-size: 30px;
    display: none;
    pointer-events: none;
}

.character-image {
    width: 80px;
    height: 80px;
    display: block;
    margin: 0 auto;
    border-radius: 10%;
}

/* 追加ここから */
.center-icon-cell {
    text-align: center;
    /* テーブルセル内のコンテンツをセンターに配置 */
}

.center-icon {
    display: block;
    margin: 0 auto;
    /* 画像自体をセンターに配置 */
    width: 50px;
    /* アイコンの幅を指定 */
    height: 50px;
    /* アイコンの高さを指定 */
    border-radius: 10%;
    /* 丸みを付ける。 */
}

.make-party-btn-line {
    display: flex;
    align-items: center;
}

/* デフォルトのPC向けスタイル */
.character-table {
    border-collapse: collapse;
}

/* ▼ バフ機能：見た目 */
.buff-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 12px 0 18px;
}

#add-buff-col,
#remove-buff-col {
    padding: 8px 14px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    background: #3b7ddd;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

#remove-buff-col:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
#add-buff-col:disabled,
#remove-buff-col:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.buff-hint {
    color: #666;
    font-size: 12px;
}

/* バフ列 */
td.buff-col input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s;
    width: 50px;
}

/* バフ列・バフ込み列の見出し背景色を薄い緑 */
th.buff-col,
th.buffed-speed {
    background-color: #e6f5e6;
}

th.buff-col,
td.buffed-speed {
    text-align: center;
}

th.buff-col,
td.buff-col {
    min-width: 90px;
}

th.buffed-speed,
td.buffed-speed {
    min-width: 115px;
}
.inputErea {
  color: #000;
}

.inputErea.gray-placeholder {
  color: #9aa0a6;
}

@media screen and (max-width: 768px) {
    .modal-content {
        margin: 10px;
        width: 90%;
    }

    .make-party-btn-line {
        display: inline;
    }

    .character-table {
        display: block;
    }

    .character-table tr {
        display: block;
        margin-bottom: 10px;
    }

    .character-table td {
        display: block;
        width: 100%;
        text-align: left;
        padding: 5px 0;
    }

    .icon {
        margin-top: 10px;
    }

    .character-image {
        width: 50px;
        height: 50px;
    }
}