/* テーブル全体のスタイル */
.ps-type-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-family: sans-serif;
}

/* ヘッダー固定 & 装飾 */
.ps-type-table th {
  position: sticky;
  top: 0;
  background: #f8f9fa;
  z-index: 10;
  padding: 8px 4px;
  font-size: 0.75rem;
  border-bottom: 2px solid #ddd;
}

/* ポケモン名の列を固定 */
.ps-type-table td:first-child, 
.ps-type-table th:first-child {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 11;
  min-width: 100px;
  font-weight: bold;
  border-right: 2px solid #eee;
}

/* テーブルを囲む親要素に高さを指定する */
.ps-type-table-wrapper {
  overflow-y: auto;       /* 縦スクロールを有効にする */
  max-height: 500px;      /* 画面に合わせて高さを調整（例: 500px） */
  border: 1px solid #ccc;
}

/* ヘッダー（th）を固定する */
.ps-type-table thead th {
  position: sticky;       /* ここが肝！ */
  top: 0;                 /* 一番上に固定 */
  background-color: #eee; /* 背景色をつけないと下の文字が透けます */
  z-index: 10;            /* 重なり順を一番上に */
  box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4); /* 境目を見やすくする */
}

/* ポケモン名の列（1番目のtdとth）を左に固定 */
.ps-type-table th:first-child,
.ps-type-table td:first-child {
  position: sticky;
  left: 0;
  background-color: #fff; /* 背景色は必須 */
  z-index: 5;
  border-right: 2px solid #ddd; /* 境界線を強調 */
}

/* 左上角のセル（ポケモンという文字が入る場所）は最前面にする */
.ps-type-table thead th:first-child {
  z-index: 20; /* ヘッダー(10)よりもさらに上に */
}

/* 相性ごとの色分け */
.m-4   { background-color: #ff4d4d; color: white; font-weight: bold; } /* ★ */
.m-2   { background-color: #ffcccc; color: #cc0000; }               /* ◎ */
.m-0-5 { background-color: #ccd9ff; color: #0033cc; }               /* △ */
.m-0-25{ background-color: #4d79ff; color: white; }               /* ▼ */
.m-0   { background-color: #444;    color: white; }               /* × */

/* 入力フォームの微調整 */
#ps-search-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  background: #f0f0f0;
  padding: 15px;
  border-radius: 8px;
}

/* ローディングコンテナ */
#ps-loader {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    color: #666;
    font-size: 0.9em;
}

/* ぐるぐる本体 */
.spinner {
    width: 18px;
    height: 18px;
    border: 3px solid rgba(0,0,0,0.1);
    border-top-color: #3498db; /* 好きな色に変えてください */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 通信中はボタンを半透明にするなどの演出 */
.ps-loading-active {
    opacity: 0.6;
    pointer-events: none;
}