@charset "UTF-8";
/* =========================================================
   ブラックジャック ストラテジー表（bs-*）専用スタイル
   読み込み先：blackjack/bj-strategy.php（Re:固定ページの外部ファイルで登録）
   経緯：本文内 <style> → page.css（2026-09-24）→ 本ファイルへ分離（2026-10-12）
   使い方：<table class="table_basic bs-chart"> を .bs-scroll で囲み、
           セルに bs-h / bs-s / bs-d / bs-p / bs-r、変更マスに bs-chg を付ける
   ========================================================= */

/* 横スクロールの枠 */
.bs-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 表本体 */
table.table_basic.bs-chart {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 2px !important;
  text-align: center;
  min-width: 520px;
  margin: 0;
  background: #c9c8c4 !important;
  table-layout: fixed !important;
}
table.table_basic.bs-chart th,
table.table_basic.bs-chart td {
  padding: 4px 3px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  vertical-align: middle !important;
  text-align: center !important;
  border: 0 !important;
}
table.table_basic.bs-chart th {
  background: #f0efec !important;
  color: #3f3e3b !important;
  font-weight: 700;
  white-space: nowrap;
}
table.table_basic.bs-chart thead th {
  font-size: 12px !important;
}
table.table_basic.bs-chart th[scope="row"],
table.table_basic.bs-chart thead tr:first-child th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 2px 0 0 #c9c8c4;
  width: 82px;
}
table.table_basic.bs-chart td {
  font-weight: 700;
  border-radius: 0 !important;
}

/* アクション別の色（H／S／D・Ds／P／R） */
table.table_basic.bs-chart td.bs-h {
  background: #e66f6b !important;
  color: #22201c !important;
}
table.table_basic.bs-chart td.bs-s {
  background: #eac24d !important;
  color: #22201c !important;
}
table.table_basic.bs-chart td.bs-d {
  background: #1b76b9 !important;
  color: #ffffff !important;
}
table.table_basic.bs-chart td.bs-p {
  background: #00622f !important;
  color: #ffffff !important;
}
table.table_basic.bs-chart td.bs-r {
  background: #adb2ae !important;
  color: #22201c !important;
}

/* 通常の表（th_color）の中で R を示すセル */
table.table_basic.th_color td.bs-r {
  background: #eaeaea !important;
  color: #3f3e3b !important;
}

/* 基本の表からの変更マス（黒枠） */
table.table_basic.bs-chart td.bs-chg {
  box-shadow: inset 0 0 0 2px #1a1a1a;
}

/* 凡例 */
.bs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.bs-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bs-legend span {
  display: inline-block;
  min-width: 26px;
  padding: 2px 6px;
  font-weight: 700;
  text-align: center;
}
.bs-legend .bs-h {
  background: #e66f6b;
  color: #22201c;
}
.bs-legend .bs-s {
  background: #eac24d;
  color: #22201c;
}
.bs-legend .bs-d {
  background: #1b76b9;
  color: #ffffff;
}
.bs-legend .bs-p {
  background: #00622f;
  color: #ffffff;
}
.bs-legend .bs-r {
  background: #adb2ae;
  color: #22201c;
}
.bs-legend .bs-chg-key {
  background: #fff;
  color: #3f3e3b;
  box-shadow: inset 0 0 0 2px #1a1a1a;
}

/* スマホ幅 */
@media screen and (max-width: 600px) {
  table.table_basic.bs-chart {
    border-spacing: 1px !important;
    min-width: 460px;
  }
  table.table_basic.bs-chart th[scope="row"],
  table.table_basic.bs-chart thead tr:first-child th:first-child {
    width: 70px;
  }
  table.table_basic.bs-chart th,
  table.table_basic.bs-chart td {
    padding: 3px 2px !important;
    font-size: 12px !important;
  }
}