/* ティアー表テーブル全体 */
#tier-table {
  max-width: 95%;
  border-collapse: collapse;
  table-layout: auto;
}

#tier-table tr {
  height: 77px;
}
/* 全セルの中央揃え（縦） */
#tier-table td {
  vertical-align: middle;
}

/* タイトル行（左2列結合＋右は空） */
#tier-table .title-row .title-cell {
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  padding: 10px 8px;
  line-height: 1.3;
  cursor: text;
}
#tier-table .title-cell:focus {
  outline: 2px solid #c7d2fe;
  border-radius: 6px;
  background: #f8fafc;
}
#tier-table .title-cell:empty::before {
  content: attr(data-placeholder);
  color: #9ca3af;
}

/* 画像出力時：ティア行の右端だけ消す（タイトルは維持） */
#tier-table.exporting tr.tier-row td:last-child {
  display: none !important;
}


#tier-table .tier-name-cell {
  position: relative;
  width: 120px;        /* 50px → 120px（初期はコンパクト） */
  max-width: 300px;    /* 200px → 300px（10文字想定に余裕） */
  vertical-align: middle;
  white-space: normal;
  word-break: break-word;
  padding: 8px;
}

/* アイコン表示用の列：常時570px固定 */
#tier-table .icon-cell {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px;
  box-sizing: border-box;
  min-width: 0;
  width: 570px !important;     /* ← 追加：固定 */
  min-width: 570px !important; /* ← 追加：固定 */
  max-width: 570px !important; /* ← 追加：固定 */
  background-color: #f2f2f2;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
#tier-table .icon-cell:hover {
  background-color: #e0e0e0;
}

/* 右端の設定列（ボタン列）幅も確保しておくと安定 */
#tier-table td:last-child {
  width: 120px;
  min-width: 120px;
  text-align: center;
}


#tier-table .icon-cell:hover {
  background-color: #e0e0e0;   /* ← ホバー時に少し濃い灰色 */
}


/* 削除ボタンの列 */
#tier-table td:last-child {
  width: 40px;
  text-align: center;
}

/* 直接編集できる見た目 */
#tier-table .tier-name-cell[contenteditable="true"] {
  cursor: text;
}
#tier-table .tier-name-cell:focus {
  outline: 2px solid #c7d2fe;
  border-radius: 6px;
  background: #f8fafc;
}


.delete-btn {
  background: #f88;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
}

.modal {
  position: fixed;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  background: white;
  border: 2px solid #888;
  overflow-y: auto;
  z-index: 1000;
  padding: 10px;
}

.modal-content {
  background: white;
  padding: 10px;
}

/* モーダルのキャラアイコン */
.character-icon {
  width: 50px;
  height: 50px;
  margin: 2px;
  border: 2px solid transparent;
  border-radius: 8px;
  box-sizing: border-box;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* 選択中：青枠＋半透明の塗り（inset box-shadow を使う） */
.character-icon.selected {
  border-color: #3b82f6; /* 青枠 */
  /* 内側の全面塗り + うっすら外側の輪郭 */
  box-shadow:
    inset 0 0 0 9999px rgba(59, 130, 246, 0.22),
    0 0 0 3px rgba(59, 130, 246, 0.35);
}

.selected-icon {
  width: 50px;
  height: 50px;
  margin: 2px;
}

.attribute-label {
  width: 40px;
  text-align: center;
  font-weight: bold;
  color: white;
  vertical-align: top;
}

.editable-cell {
  cursor: pointer;
  padding: 6px;
  vertical-align: top;
  white-space: normal;
  word-break: break-word;
}

/* 行コントロール（2×2配置：上段=▲+色、下段=▼+×） */
.row-controls {
  display: grid;                 /* ← flex から grid に変更 */
  grid-template-columns: repeat(2, auto);
  grid-auto-rows: minmax(28px, auto);
  gap: 6px 8px;
  justify-content: center;
  align-items: center;
  padding: 4px 0;
}

.row-controls .ctrl-btn {
  border: 1px solid #ddd;
  background: #f7f7f7;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.row-controls .ctrl-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* カラーパレット（既存） */
.color-palette {
  position: absolute;
  z-index: 9999;
  display: grid;
  grid-template-columns: repeat(5, 24px);
  gap: 8px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.color-palette.hidden { display: none; }

.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.1);
  cursor: pointer;
}

/* 画像出力時にコントロール列を非表示にする */
#tier-table.exporting td:last-child {
  display: none !important;
}

/* 保存ボタンの軽い体裁（任意） */
.export-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.export-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#add-row-btn {
  margin-top: 10px;
  padding: 6px 12px;
}

#add-row-btn,
#export-image-btn,
#reset-btn {
  padding: 8px 12px;
  border: 1px solid #ddd;
  background: #f7f7f7;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
#add-row-btn,
#export-image-btn:hover,
#reset-btn:hover {
  background: #eee;
}

/* 初期化は少しだけ注意カラーに */
#reset-btn {
  background: #fee2e2;
  border-color: #fecaca;
}
#reset-btn:hover {
  background: #fecaca;
}

/* 画像出力中は、ティア名列の幅をJSで測った値にロック */
#tier-table.exporting .tier-name-cell {
  width: var(--tier-name-w) !important;
  min-width: var(--tier-name-w) !important;
  max-width: var(--tier-name-w) !important;
}

@media screen and (max-width: 768px) {
  /* テーブルは自然幅で折り返し優先に */
  #tier-table {
    table-layout: auto;
    width: 100%;
  }

  /* 余白は最小限に（はみ出し防止） */
  table {
    width: 100%;
    margin: 0;
  }

  /* 左列は少しだけ狭めてアイコン側の幅を確保 */
  #tier-table .tier-name-cell {
    width: auto;
    max-width: 160px;
  }

  /* ★ 固定570pxを解除（!importantで上書き） */
  #tier-table .icon-cell {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px;
    box-sizing: border-box;
    background-color: #f2f2f2;
    cursor: pointer;
    transition: background-color 0.2s ease;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* 右端のボタン列も少し圧縮して横余裕を作る */
  #tier-table td:last-child {
    width: 96px;
    min-width: 96px;
    text-align: center;
  }
}