/* ============================================================
   HOTATE ランキング UI リニューアル CSS
   stylemh.css の末尾に追記、または別途 link で読み込む
   ブレークポイント: 768px
   ルールテーマ: --theme-* 変数で切り替え
   ============================================================ */

/* ----------------------------------------------------------
   CSS カスタムプロパティ（テーマカラー）
   デフォルト = Mリーグルール（濃紺）
   ---------------------------------------------------------- */
:root {
  --theme-primary:     #003765;
  --theme-primary-mid: #1a4fba;
  --theme-primary-lt:  #e8eef8;
  --theme-header-bg:   #003765;
  --theme-tab-active:  #1a4fba;
  --theme-tab-border:  #1a4fba;
  --theme-btn-bg:      #003765;
  --theme-section-bar: #1a4fba;
}

/* リーグ戦 / アエルOP / 3麻 → グレー系テーマ */
body.theme-gray {
  --theme-primary:     #4a4a4a;
  --theme-primary-mid: #6c6c6c;
  --theme-primary-lt:  #f0f0f0;
  --theme-header-bg:   #3a3a3a;
  --theme-tab-active:  #6c6c6c;
  --theme-tab-border:  #6c6c6c;
  --theme-btn-bg:      #4a4a4a;
  --theme-section-bar: #6c6c6c;
}

/* ----------------------------------------------------------
   リセット補足 / ベース
   ---------------------------------------------------------- */
.rn2 * {
  box-sizing: border-box;
}

.rn2 {
  font-family: 'Noto Sans JP', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #222;
  background: #f5f6fa;
  /* pd-* / 見出しバーで使う短縮エイリアス（theme-gray 時は --theme-* に追従） */
  --tp: var(--theme-primary);
  --tp-lt: var(--theme-primary-lt);
  --sec: var(--theme-section-bar);
}

/* ----------------------------------------------------------
   ページヘッダー
   ---------------------------------------------------------- */
.rn2-header {
  background: var(--theme-header-bg);
  color: #fff;
  text-align: center;
  padding: 16px 0;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.rn2-header .rn2-header-icon {
  font-size: 22px;
}

/* ============================================================
   個人成績ページ ヘッダー（タイトル中央 + ボタン右）
   grid 3列(1fr / auto / 1fr) でタイトルを必ず物理的中央に
   ============================================================ */
.pd-header {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 16px;
  gap: 8px;
}
.pd-header-spacer {
  /* 左側の空セル: 何も置かない */
}
.pd-header-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.pd-mypage-btn-header {
  justify-self: end;  /* 右セル内で右寄せ */
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;  /* ブラウザデフォルトbutton fontを継承して上書き */
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  margin: 0;
  transition: background 0.15s;
  letter-spacing: 0.5px;  /* 少しだけ字間を空けて読みやすく */
}
.pd-mypage-btn-header:hover {
  background: rgba(255,255,255,0.28);
}
.pd-mypage-btn-header.registered {
  background: rgba(255,255,255,0.35);
}

/* スマホ: ヘッダーをコンパクトに */
@media (max-width: 768px) {
  .pd-header {
    padding: 10px 12px;
    gap: 6px;
  }
  .pd-header-title {
    font-size: 17px;
  }
  .pd-mypage-btn-header {
    font-size: 11px;
    padding: 6px 10px;
  }
}

/* ----------------------------------------------------------
   メインナビタブ（月間ランキング / 全期間 / 受賞一覧）
   ---------------------------------------------------------- */
.rn2-mainnav {
  display: flex;
  background: #fff;
  border-bottom: 1px solid #dde3ed;
}

.rn2-mainnav a {
  flex: 1;
  display: block;
  text-align: center;
  padding: 12px 8px;
  font-size: 14px;
  font-weight: bold;
  color: #555;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.rn2-mainnav a.active,
.rn2-mainnav a.cursel {
  color: var(--theme-tab-active);
  border-bottom-color: var(--theme-tab-border);
}

.rn2-mainnav a:hover {
  color: var(--theme-tab-active);
  opacity: 1;
}

/* ----------------------------------------------------------
   月別 / 年別 サブタブ（メインナビ右側 or 独立行）
   ---------------------------------------------------------- */
.rn2-subnav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 8px 16px;
  border-bottom: 1px solid #dde3ed;
  flex-wrap: wrap;
  gap: 8px;
}

.rn2-subnav-tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--theme-primary);
  border-radius: 6px;
  overflow: hidden;
}

.rn2-subnav-tabs a {
  display: block;
  padding: 7px 22px;
  font-size: 13px;
  font-weight: bold;
  color: var(--theme-primary);
  text-decoration: none;
  background: #fff;
  border-right: 1px solid var(--theme-primary);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.rn2-subnav-tabs a:last-child {
  border-right: none;
}

.rn2-subnav-tabs a.active,
.rn2-subnav-tabs a.cursel {
  background: var(--theme-primary);
  color: #fff;
}

.rn2-subnav-tabs a:hover {
  background: var(--theme-primary);
  color: #fff;
  opacity: 1;
}

/* ----------------------------------------------------------
   条件バー：アコーディオン式
   ---------------------------------------------------------- */
.rn2-condition-bar {
  padding: 10px 16px;
  background: #f5f6fa;
  border-bottom: 1px solid #dde3ed;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 月間ランキング：ルールアコーディオンは未連携のため非表示（復帰時は HTML 側のクラスを外す） */
.rn2-acc-rule-hidden {
  display: none !important;
}

/* アコーディオン1件分のラッパー */
.rn2-accordion {
  background: #fff;
  border: 1px solid #dde3ed;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* 閉じているときのヘッダー行 */
.rn2-accordion-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  gap: 12px;
}

.rn2-accordion-header:hover {
  background: #f8f9fc;
  opacity: 1;
}

.rn2-accordion-icon {
  font-size: 20px;
  color: var(--theme-primary);
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.rn2-accordion-texts {
  flex: 1;
  min-width: 0;
}

.rn2-accordion-label {
  font-size: 11px;
  color: #888;
  font-weight: bold;
  letter-spacing: 0.04em;
  display: block;
  line-height: 1.2;
}

.rn2-accordion-value {
  font-size: 17px;
  font-weight: bold;
  color: var(--theme-primary);
  display: block;
  line-height: 1.3;
  margin-top: 1px;
}

.rn2-accordion-caret {
  font-size: 13px;
  color: #aaa;
  transition: transform 0.2s;
  flex-shrink: 0;
}

/* 開いているとき */
.rn2-accordion.open .rn2-accordion-caret {
  transform: rotate(180deg);
}

/* ドロップダウンリスト本体 */
.rn2-accordion-body {
  display: none;
  border-top: 1px solid #eef0f5;
}

.rn2-accordion.open .rn2-accordion-body {
  display: block;
}

/* オプション行 */
.rn2-accordion-option {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 15px;
  color: #333;
  border-bottom: 1px solid #f0f0f5;
  transition: background 0.1s;
}

.rn2-accordion-option:last-child {
  border-bottom: none;
}

.rn2-accordion-option:hover {
  background: #f0f4ff;
  opacity: 1;
}

/* 選択中オプション */
.rn2-accordion-option.selected {
  background: #eef3fb;
  color: var(--theme-primary);
  font-weight: bold;
}

.rn2-accordion-option-check {
  margin-left: auto;
  color: var(--theme-primary);
  font-size: 16px;
  opacity: 0;
}

.rn2-accordion-option.selected .rn2-accordion-option-check {
  opacity: 1;
}

/* 「もっと過去を見る」行 */
.rn2-accordion-more {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--theme-primary-mid);
  font-weight: bold;
  border-top: 1px solid #eef0f5;
}

.rn2-accordion-more:hover {
  background: #f0f4ff;
  opacity: 1;
}

.rn2-accordion-more-arrow {
  margin-left: auto;
  font-size: 14px;
  color: var(--theme-primary-mid);
}

/* 非表示にする本来のselectタグ */
.rn2-hidden-select {
  display: none !important;
}

/* ----------------------------------------------------------
   ページタイトル行（集計期間の大見出し）
   ---------------------------------------------------------- */
.rn2-period-title {
  padding: 16px 16px 4px;
  background: #fff;
}

.rn2-period-title .rn2-period-label {
  font-size: 12px;
  color: #888;
}

.rn2-period-title .rn2-period-value {
  font-size: 28px;
  font-weight: bold;
  color: #111;
  line-height: 1.2;
  margin-top: 2px;
}

@media (max-width: 768px) {
  .rn2-period-title {
    padding: 12px 12px 4px;
  }
  .rn2-period-title .rn2-period-value {
    font-size: 22px;
  }
}

/* ----------------------------------------------------------
   コンテンツエリア
   ---------------------------------------------------------- */
.rn2-content {
  padding: 0 16px 80px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .rn2-content {
    padding: 0 10px 80px;
  }
}

/* ----------------------------------------------------------
   セクション見出し
   ---------------------------------------------------------- */
.rn2-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: bold;
  color: #111;
  margin: 24px 0 12px;
  padding-left: 4px;
}

.rn2-section-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 18px;
  background: var(--theme-section-bar);
  border-radius: 2px;
  flex-shrink: 0;
}

.rn2-section-title .rn2-section-icon {
  font-size: 15px;
}

/* サブ見出し（ベストスコア・ラス回避率など小ラベル） */
.rn2-sub-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin: 16px 0 6px;
}

.rn2-sub-label-right {
  font-size: 11px;
  color: #888;
  float: right;
  font-weight: normal;
}

/* ----------------------------------------------------------
   2カラムグリッド（PC: 左右、SP: 縦積み）
   ---------------------------------------------------------- */
.rn2-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .rn2-grid-2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ----------------------------------------------------------
   カード（テーブルを包むボックス）
   ---------------------------------------------------------- */
.rn2-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  overflow: hidden;    /* PC版はhidden */
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .rn2-card {
    overflow-x: auto;          /* SP版: 横スクロール許可 */
    -webkit-overflow-scrolling: touch;
  }
}

/* 名前列は必ず1行（折り返し禁止） */
.rn2-table a {
  white-space: nowrap;
}
.rn2-table tbody td:nth-child(2) {
  white-space: nowrap;        /* 名前セル折り返し禁止 */
  min-width: 60px;
}

@media (max-width: 768px) {
  .rn2-card {
    border-radius: 8px;
    margin-bottom: 12px;
  }
}

/* ----------------------------------------------------------
   ランキングテーブル共通
   ---------------------------------------------------------- */
.rn2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 19px;
}

.rn2-table thead th {
  background: var(--theme-primary);
  color: #fff;
  padding: 8px 8px;
  text-align: center;
  font-weight: bold;
  white-space: nowrap;
  font-size: 16px;
}



.rn2-table tbody tr {
  border-bottom: 1px solid #eef0f5;
  transition: background 0.1s;
}

.rn2-table tbody tr:hover {
  background: #f0f4ff;
  opacity: 1;
}

/* 1位行ハイライト */
.rn2-table tbody tr.rn2-row-1st {
  background: #fdf8ec;
}
.rn2-table tbody tr.rn2-row-1st:hover {
  background: #faf0d0;
}

/* 偶数行の薄い背景 */
.rn2-table tbody tr.rn2-row-even {
  background: #f8f9fc;
}
.rn2-table tbody tr.rn2-row-even:hover {
  background: #f0f4ff;
}

.rn2-table tbody td {
  padding: 8px 8px;
  vertical-align: middle;
  color: #333;
  height: 48px;
  box-sizing: border-box;
}

.rn2-table tbody td:nth-child(1) {
  text-align: center;
  width: 52px;
}

.rn2-table tbody td:nth-child(2) {
  text-align: left;
}

.rn2-table tbody td.rn2-td-num {
  text-align: center;
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rn2-table tbody td.rn2-td-center {
  text-align: center;
}

.rn2-table a {
  color: var(--theme-primary-mid);
  text-decoration: none;
}
.rn2-table a:hover {
  text-decoration: underline;
  opacity: 1;
}

/* 赤ハイライト（成績優秀値） */
.rn2-val-red {
  color: #e02020;
  font-weight: bold;
}

/* 太字（上位10名） */
.rn2-val-bold {
  font-weight: bold;
}

/* ----------------------------------------------------------
   順位バッジ
   ---------------------------------------------------------- */
.rn2-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  flex-shrink: 0;
}

.rn2-rank-1 { background: #d4a017; }  /* 金 */
.rn2-rank-2 { background: #8a8a8a; }  /* 銀 */
.rn2-rank-3 { background: #c07840; }  /* 銅 */
.rn2-rank-4 { background: #7c5abf; }  /* 紫 */
.rn2-rank-5 { background: #2e9e6e; }  /* 緑 */
.rn2-rank-n { background: #c8cdd8; color: #555; }  /* 6位以下 */

/* 1位に王冠アイコン追加 */


/* 順位セル（バッジ + 数字を縦中央） */
.rn2-rank-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----------------------------------------------------------
   メイン詳細テーブル（月間個人成績表）
   ---------------------------------------------------------- */
.rn2-detail-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  background: #fff;
  margin-bottom: 16px;
}

.rn2-detail-table {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
  font-size: 16px;
}

.rn2-detail-table thead th {
  background: var(--theme-primary);
  color: #fff;
  padding: 8px 7px;
  text-align: center;
  font-weight: bold;
  white-space: nowrap;
  font-size: 14px;
  border-right: 1px solid rgba(255,255,255,0.15);
}

.rn2-detail-table tbody tr {
  border-bottom: 1px solid #eef0f5;
}

.rn2-detail-table tbody tr:nth-child(even) {
  background: #f8f9fc;
}

.rn2-detail-table tbody tr:hover {
  background: #f0f4ff;
  opacity: 1;
}

.rn2-detail-table tbody td {
  padding: 7px 7px;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-right: 1px solid #eef0f5;
}
/* 個人成績表: 名前列だけ左寄せ */
.rn2-detail-table tbody td:nth-child(3) {
  text-align: left;
}

.rn2-detail-table tbody td:nth-child(1),
.rn2-detail-table tbody td:nth-child(2) {
  text-align: center;
}

.rn2-detail-table tbody td:nth-child(3) {
  text-align: left;
  min-width: 80px;
}

/* pd-stats-table（個人成績スタッツ）: 3列目以降は数値（順位回数）、名前列無し */
.rn2-detail-table.pd-stats-table tbody td:nth-child(3),
.rn2-detail-table.pd-stats-table tbody td:nth-child(4),
.rn2-detail-table.pd-stats-table tbody td:nth-child(5),
.rn2-detail-table.pd-stats-table tbody td:nth-child(6) {
  text-align: center !important;
  min-width: 0 !important;
}
.rn2-detail-table.pd-stats-table thead th:nth-child(3),
.rn2-detail-table.pd-stats-table thead th:nth-child(4),
.rn2-detail-table.pd-stats-table thead th:nth-child(5),
.rn2-detail-table.pd-stats-table thead th:nth-child(6),
.rn2-detail-table.pd-stats-table tbody td:nth-child(3),
.rn2-detail-table.pd-stats-table tbody td:nth-child(4),
.rn2-detail-table.pd-stats-table tbody td:nth-child(5),
.rn2-detail-table.pd-stats-table tbody td:nth-child(6) {
  width: auto;
}

/* SP: スマホ時、ヘッダー行とtbodyの名前列(3列目)をsticky固定 */
@media (max-width: 768px) {
  /* ラッパーに最大高さを設けてtheadが上端に張り付くようにする */
  .rn2-detail-wrap {
    max-height: 70vh;
    overflow: auto;
  }

  /* ===== 横スクロール: 名前列だけ左に固定 ===== */
  /* tbody 名前列（3列目）を左固定 */
  .rn2-detail-with-name tbody td:nth-child(3) {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;  /* デフォルトは白で塗りつぶし（透け防止） */
    border-right: 2px solid #dde3ed;
    box-shadow: 4px 0 6px -3px rgba(0,0,0,0.08);
    white-space: nowrap;
  }
  /* 偶数行の名前セルは偶数行の背景色 */
  .rn2-detail-with-name tbody tr:nth-child(even) td:nth-child(3) {
    background: #f8f9fc;
  }
  /* 1〜10位の色付き行はその色を維持（合計点ランキングと統一） */
  .rn2-detail-with-name tbody tr.rn2-row-rank-1 td:nth-child(3) { background: #fdf8ec; }
  .rn2-detail-with-name tbody tr.rn2-row-rank-2 td:nth-child(3) { background: #f1f3f5; }
  .rn2-detail-with-name tbody tr.rn2-row-rank-3 td:nth-child(3) { background: #fbeee0; }
  .rn2-detail-with-name tbody tr.rn2-row-rank-4 td:nth-child(3) { background: #f3edfa; }
  .rn2-detail-with-name tbody tr.rn2-row-rank-5 td:nth-child(3) { background: #e8f5ec; }
  .rn2-detail-with-name tbody tr.rn2-row-rank-6 td:nth-child(3) { background: #fefaf2; }
  .rn2-detail-with-name tbody tr.rn2-row-rank-7 td:nth-child(3) { background: #f8f9fb; }
  .rn2-detail-with-name tbody tr.rn2-row-rank-8 td:nth-child(3) { background: #fdf6ee; }
  .rn2-detail-with-name tbody tr.rn2-row-rank-9 td:nth-child(3) { background: #f9f5fc; }
  .rn2-detail-with-name tbody tr.rn2-row-rank-10 td:nth-child(3){ background: #f1f9f3; }

  /* ===== 縦スクロール: theadを上に固定 ===== */
  .rn2-detail-with-name thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--theme-primary);
  }
  /* 左上(名前列)は両軸固定なので最上位 */
  .rn2-detail-with-name thead th:nth-child(3) {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 5;
    box-shadow: 4px 0 6px -3px rgba(0,0,0,0.08);
  }
}

.rn2-detail-table a {
  color: var(--theme-primary-mid);
  text-decoration: none;
}
.rn2-detail-table a:hover {
  text-decoration: underline;
  opacity: 1;
}

/* ----------------------------------------------------------
   その他セクション（役満テーブル）
   ---------------------------------------------------------- */


/* ----------------------------------------------------------
   ボトムボタン（全項目をリダ個人成績表を見る）
   ---------------------------------------------------------- */
.rn2-bottom-info {
  text-align: center;
  font-size: 12px;
  color: #888;
  margin: 8px 0 12px;
}

.rn2-btn-full {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto 8px;
  padding: 14px 0;
  background: var(--theme-primary);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity 0.2s;
  border: none;
  cursor: pointer;
}

.rn2-btn-full:hover {
  opacity: 0.82;
  color: #fff;
}

.rn2-notice {
  text-align: center;
  font-size: 11px;
  color: #aaa;
  margin-top: 8px;
  padding-bottom: 16px;
}

/* ----------------------------------------------------------
   スマホ ボトムナビゲーション
   ---------------------------------------------------------- */
.rn2-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .rn2-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    border-top: 1px solid #dde3ed;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  }
}

.rn2-bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px 10px;
  font-size: 10px;
  color: #aaa;
  text-decoration: none;
  transition: color 0.15s;
}

.rn2-bottom-nav a.active {
  color: var(--theme-tab-active);
}

.rn2-bottom-nav a .rn2-nav-icon {
  font-size: 20px;
  line-height: 1;
}

/* SVGアイコン代替（絵文字使用） */
.rn2-bottom-nav a:hover {
  color: var(--theme-tab-active);
  opacity: 1;
}

/* ----------------------------------------------------------
   PC版：ボトムナビは非表示
   ---------------------------------------------------------- */
@media (min-width: 769px) {
  .rn2-bottom-nav {
    display: none !important;
  }
}

/* ----------------------------------------------------------
   レスポンシブ調整
   ---------------------------------------------------------- */

/* スマホ: 条件バーを縦並び */
@media (max-width: 768px) {
  .rn2-condition-bar {
    flex-direction: row;
    gap: 8px;
    padding: 10px 12px;
  }
  .rn2-condition-item {
    flex: 1;
    min-width: 0;
  }
  .rn2-condition-item .rn2-condition-inner {
    padding: 7px 8px;
  }
  .rn2-condition-item select {
    font-size: 13px;
    max-width: 100%;
  }

  /* スマホ: サブナビバー */
  .rn2-subnav-bar {
    padding: 8px 12px;
  }

  /* スマホ: テーブルフォント */
  .rn2-table {
    font-size: 19px;
  }
  .rn2-table thead th {
    font-size: 14px;
    padding: 7px 6px;
  }
  .rn2-table tbody td {
    padding: 7px 6px;
    font-size: 13px;
  }
  /* スマホ: 数値列（1位〜4位・合計点・順位率等） */
  .rn2-table tbody td.rn2-td-num {
    padding: 7px 4px;
    font-size: 14px;
    min-width: 0;
    text-align: right;  /* 数字は右寄せで桁が揃って見やすい */
    padding-right: 10px;
  }
  /* 名前列(2列目)が長くてはみ出さないよう省略表示 */
  .rn2-table tbody td:nth-child(2) {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }
  /* 順位列(1列目)を狭く */
  .rn2-table tbody td:nth-child(1) {
    width: 44px;
    padding-left: 4px;
    padding-right: 4px;
  }
  /* テーブル全体のpadding調整 */
  .rn2-card {
    padding: 0;
  }
  .rn2-table thead th:not(:nth-child(1)):not(:nth-child(2)) {
    padding: 7px 5px;
    min-width: 0;
  }
  /* 順位バッジをSPで小さく */
  .rn2-rank {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }


  /* スマホ: コンテンツ上部余白 */
  .rn2-content {
    padding-top: 4px;
  }
}

/* PC: コンテンツ幅制限 */
@media (min-width: 769px) {
  .rn2-content {
    padding: 0 24px 40px;
  }
  .rn2-condition-bar {
    padding: 12px 24px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .rn2-subnav-bar {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 24px;
    border-bottom: none;
  }
  .rn2-period-title {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px 4px;
  }
}

/* ----------------------------------------------------------
   PC版 メインナビ + サブタブ 統合バー
   ---------------------------------------------------------- */
@media (min-width: 769px) {
  .rn2-nav-combined {
    background: #fff;
    border-bottom: 1px solid #dde3ed;
    max-width: 100%;
  }

  .rn2-nav-combined-inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
  }

  .rn2-nav-combined .rn2-mainnav {
    border-bottom: none;
    flex: 0 0 auto;
    gap: 0;
  }

  .rn2-nav-combined .rn2-mainnav a {
    padding: 14px 24px;
    font-size: 14px;
  }

  .rn2-nav-combined .rn2-subnav-tabs-pc {
    display: flex;
    align-items: center;
    gap: 0;
  }

  /* スマホのサブタブバーはPC時非表示 */
  .rn2-subnav-bar-sp {
    display: none;
  }
}

@media (max-width: 768px) {
  /* PC用統合ナビは非表示 */
  .rn2-nav-combined-inner .rn2-subnav-tabs-pc {
    display: none;
  }
  /* スマホでは統合バー内のメインナビを隠し、.rn2-mainnav-sp の1行だけにする */
  .rn2-nav-combined .rn2-mainnav {
    display: none !important;
  }
  /* スマホのサブタブバーを表示 */
  .rn2-subnav-bar-sp {
    display: flex;
  }
  /* 固定ボトムナビの下にコンテンツが隠れないよう余白 */
  body#rn2-body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   個人成績ページ (personaldetail_new.inc) 専用スタイル
   ============================================================ */

/* ---- ルール切替バー ---- */
.pd-rule-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid #dde3ed;
  padding: 10px 16px;
  gap: 12px;
  flex-wrap: nowrap;  /* リーグ戦タブと戻るボタンを必ず1行に */
}
/* スマホで戻るボタンを右端に押し付け */
@media (max-width: 768px) {
  .pd-rule-bar {
    padding: 8px 12px;
  }
  /* SPでは上部の戻るボタンを非表示（下部にあるため） */
  .pd-rule-bar .pd-back-btn {
    display: none !important;
  }
  .pd-rule-bar .pd-prize-top {
    font-size: 11px;
    padding: 6px 10px;
  }
  .pd-rule-tabs a,
  .pd-rule-tabs span.pd-league-tab {
    padding: 6px 14px;
    font-size: 12px;
  }
  .rn2-btn-back {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
}
/* 個人ページ上部：受賞一覧（PATH_INFO でも壊れない絶対パスは PHP 側 mh_prize_url_path） */
.pd-prize-top {
  flex-shrink: 0;
  padding: 7px 13px;
  background: #003765;
  color: #fff !important;
  border-radius: 6px;
  font-size: 13px;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.5px;
  transition: background 0.15s;
}
.pd-prize-top:hover {
  background: #1a5485;
  color: #fff !important;
}

.pd-rule-tabs {
  display: flex;
  gap: 8px;
}
.pd-rule-tabs a,
.pd-rule-tabs span.pd-league-tab {
  display: block;
  padding: 8px 22px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 6px;
  border: 1.5px solid var(--tp);
  color: var(--tp);
  text-decoration: none;
  background: #fff;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.pd-rule-tabs a.active {
  background: var(--tp);
  color: #fff;
}
.pd-rule-tabs a:hover {
  background: var(--tp);
  color: #fff;
  opacity: 1;
}
.pd-rule-tabs span.pd-league-tab--noaction {
  cursor: default;
  opacity: 0.72;
  pointer-events: none;
  border-style: dashed;
}
.rn2-btn-back {
  display: inline-block;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: bold;
  color: var(--tp);
  border: 1.5px solid var(--tp);
  border-radius: 6px;
  text-decoration: none;
  background: #fff;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.rn2-btn-back:hover {
  background: var(--tp);
  color: #fff;
  opacity: 1;
}

/* ---- プロフィールカード ---- */
.pd-profile-card {
  background: var(--tp);
  color: #fff;
  padding: 16px 20px;
  transition: background .3s;
}
.pd-profile-name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.pd-crown { font-size: 22px; }
.pd-no { font-size: 14px; opacity: .8; }
.pd-name { font-size: 22px; font-weight: bold; }
.pd-profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;                        /* 旧デザイン同様に隙間なし */
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: 12px;
}
.pd-stat-item {
  flex: 1 1 0;                   /* 均等幅（4枚なら25%ずつ） */
  min-width: 140px;
  padding: 12px 20px;
  border-right: 1px solid rgba(255,255,255,.15);
  background: transparent;
  border-radius: 0;
  text-align: center;            /* 中身を中央揃え */
}
.pd-stat-item:last-child {
  border-right: none;
}
@media (max-width: 768px) {
  .pd-stat-item {
    flex: 0 0 50%;               /* SP: 2列 */
    min-width: 0;
    border-bottom: 1px solid rgba(255,255,255,.15);
    padding: 10px 16px;
  }
  .pd-stat-item:nth-child(odd)  { border-right: 1px solid rgba(255,255,255,.15); }
  .pd-stat-item:nth-child(even) { border-right: none; }
}
.pd-stat-label {
  font-size: 11px;
  opacity: .8;
  margin-bottom: 4px;
  white-space: nowrap;
}
.pd-stat-value { line-height: 1.1; }
.pd-stat-main {
  font-size: 38px;
  font-weight: bold;
  line-height: 1;
}
.pd-stat-denom {
  font-size: 13px;
  opacity: .7;
  margin-left: 3px;
}
.pd-stat-rating {
  font-size: 38px;
  font-weight: bold;
  line-height: 1;
}

/* ---- 本日の成績・順位 ---- */
.pd-today-block {
  background: #fff;
  padding: 14px 16px;
  border-bottom: 1px solid #eef0f5;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 0;  /* 上の余白を0に */
}
/* 本日の成績内部レイアウト */
.pd-today-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  width: 100%;
}
.pd-today-score-col {
  text-align: center;
}
.pd-today-juni-col {
  text-align: center;
  flex: 1;
  min-width: 200px;
}
.pd-today-head {
  font-size: 12px;
  font-weight: bold;
  color: #555;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.pd-today-val {
  font-size: 36px;
  font-weight: bold;
  color: #e06090;
  line-height: 1;
}
.pd-today-pt {
  font-size: 16px;
  color: #888;
  margin-left: 4px;
}
.pd-today-sp-score {
  text-align: center;
}
.pd-today-sp-val {
  font-size: 28px;
  font-weight: bold;
  color: #e06090;
  line-height: 1;
}
/* SP版も中央揃え */
.pd-today-sp {
  text-align: center;
}
.pd-today-label {
  font-size: 12px;
  font-weight: bold;
  color: #555;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pd-today-icon { font-size: 14px; }

/* ============================================================
   本日の成績ブロック 4カラム化（成績/順位率/平均点/順位履歴）
   ============================================================ */
/* PC版 */
.pd-today-pc .pd-today-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.6fr;
  gap: 16px;
  align-items: center;
  width: 100%;
}
.pd-today-col {
  text-align: center;
  padding: 6px 8px;
  border-right: 1px solid #eef0f5;
}
.pd-today-col:last-child {
  border-right: none;
}
.pd-today-main {
  background: linear-gradient(135deg, #fff5f8, #fff);
  border-radius: 8px;
  padding: 10px 8px;
}
.pd-today-val-big {
  font-size: 60px !important;  /* 一番大きく */
  color: #e06090;
  font-weight: bold;
  line-height: 1;
}
.pd-today-sub-val {
  font-size: 38px;
  color: #003765;
  font-weight: bold;
  line-height: 1;
}

/* SP版 */
.pd-today-sp-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.pd-today-sp-col {
  text-align: center;
  padding: 8px 10px;
  background: #fff;
  border-radius: 6px;
}
.pd-today-sp-main {
  background: linear-gradient(135deg, #fff5f8, #fff);
  padding: 14px 10px;
  border: 1px solid #fce5ee;
}
.pd-today-sp-val-big {
  font-size: 52px !important;
  color: #e06090;
  font-weight: bold;
  line-height: 1;
}
.pd-today-sp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pd-today-sp-sub-val {
  font-size: 32px;
  color: #003765;
  font-weight: bold;
  line-height: 1;
}

/* ============================================================
   連続記録・通算 デザイン強化
   ============================================================ */
.pd-streak-pc, .pd-streak-sp {
  background: #fff;
  padding: 14px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.pd-streak-pc {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.pd-streak-item {
  background: linear-gradient(135deg, #f4f7fb, #fff);
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  padding: 14px 10px;
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.pd-streak-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,55,101,0.12);
  border-color: #003765;
}
.pd-streak-lbl {
  display: block;
  font-size: 11px;
  color: #666;
  font-weight: 500;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.pd-streak-val {
  font-size: 28px;
  font-weight: bold;
  color: #003765;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   役満アイコン・表彰アイコンの数字バッジ拡大
   ============================================================ */
.pd-yakuman-badge, .pd-award-badge {
  font-size: 16px !important;
  min-width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  padding: 0 7px !important;
  border-radius: 12px !important;
  font-weight: bold !important;
}
.pd-today-score { min-width: 120px; }
.pd-today-value {
  font-size: 36px;
  font-weight: bold;
  color: #e06090;
  line-height: 1;
}
.pd-today-unit { font-size: 16px; color: #888; margin-left: 4px; }

/* 順位バッジ群 */
.pd-today-junibadge { flex: 1; min-width: 200px; }
.pd-juni-badges {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}
.pd-juni-badge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
}
.pd-juni-new {
  background: #e02020;
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.4;
}
.pd-juni-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.pd-juni-badge-label {
  font-size: 9px;
  color: #aaa;
  white-space: nowrap;
}
.pd-juni-arrow {
  font-size: 16px;
  color: #ccc;
  padding-bottom: 14px;
  align-self: flex-end;
}

/* 来店情報 */
.pd-visit-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #eef0f5;
  font-size: 13px;
  color: #555;
  flex-wrap: wrap;
}
.pd-visit-icon { font-size: 14px; }
.pd-visit-info strong { color: #222; margin-left: 4px; }
.pd-visit-arrow { color: #aaa; font-size: 16px; }

/* SP版来店情報 */
/* 来店情報（PC・SP共通） - 本日の成績の上に中央配置 */
/* 来店情報（PC・SP共通）— 以前のSP版スタイルを踏襲 */
.pd-visit-common {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid #eef0f5;
  font-size: 12px;
  color: #555;
  flex-wrap: wrap;
}
.pd-visit-common strong { color: #222; }
.pd-visit-common .pd-visit-arrow { color: #aaa; font-size: 16px; }

/* ---- スタッツテーブル共通 ---- */
.pd-stats-table {
  min-width: 700px;
}
.pd-stats-table thead th,
.pd-stats-table tbody td {
  text-align: right;
}
.pd-stats-table thead th:first-child,
.pd-stats-table tbody td:first-child {
  text-align: center;
}

/* ============================================================
   年別スタッツテーブル: スマホ時 年度列(1列目)を左固定
   月間スタッツ・全期間スタッツは1行のみのため固定不要
   ============================================================ */
@media (max-width: 768px) {
  /* 年別スタッツのwrapper にmax-heightは不要(縦スクロールなし)、横スクロールのみ */
  #pd-year-table tbody td:nth-child(1),
  #pd-year-table thead th:nth-child(1) {
    position: sticky !important;
    left: 0 !important;
    z-index: 3 !important;
    background: #fff !important;
    box-shadow: inset -1px 0 0 0 #eef0f5, 4px 0 4px -3px rgba(0,0,0,0.06) !important;
  }
  #pd-year-table thead th:nth-child(1) {
    background: var(--theme-primary) !important;
    z-index: 5 !important;
    box-shadow: inset -1px 0 0 0 rgba(255,255,255,0.2), 4px 0 4px -3px rgba(0,0,0,0.06) !important;
  }
  /* 偶数行の固定セル背景 */
  #pd-year-table tbody tr:nth-child(even) td:nth-child(1) {
    background: #f8f9fc !important;
  }
}

/* ---- 年別スタッツ NEW バッジ ---- */
.pd-new-badge {
  display: inline-block;
  background: #e02020;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: .02em;
}
.pd-new-placeholder {
  background: #f8f9fc;
  border: 1.5px dashed #dde3ed;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: #aaa;
  margin-bottom: 16px;
}

/* 役満ブロックのスタイルは下記「個人成績ページ スタイル整合」内の
   .pd-yakuman-block / .pd-yaku-block 併記ルールに統合 */

/* ---- グラフ ---- */
.pd-graph-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .pd-graph-grid { grid-template-columns: 1fr; }
}
.pd-graph-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  padding: 14px;
  box-sizing: border-box;
  min-width: 0;          /* grid子のはみ出し防止 */
  overflow: hidden;      /* canvas や凡例がはみ出さない */
}
.pd-graph-card canvas {
  max-width: 100% !important;
  height: auto !important;
}
.pd-graph-title {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  text-align: center;
}

/* ---- 連続記録カード ---- */
.pd-streak-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .pd-streak-grid { grid-template-columns: repeat(2, 1fr); }
}
.pd-streak-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  padding: 14px 10px;
  text-align: center;
}
.pd-streak-accent {
  background: var(--tp-lt);
  border: 1px solid var(--tp);
  transition: background .3s, border-color .3s;
}
.pd-streak-icon { font-size: 20px; margin-bottom: 4px; }
.pd-streak-label {
  font-size: 11px;
  color: #888;
  margin-bottom: 6px;
  line-height: 1.3;
  white-space: nowrap;
}
.pd-streak-value {
  font-size: 28px;
  font-weight: bold;
  color: var(--tp);
  transition: color .3s;
}

/* ---- 対戦成績テーブル ---- */
.pd-taisen-table { min-width: 500px; }
.pd-taisen-table thead th:first-child,
.pd-taisen-table tbody td:first-child { text-align: left; }
.pd-taisen-table thead th,
.pd-taisen-table tbody td { text-align: center; }

/* ---- すべて表示ボタン ---- */
.pd-show-all-btn {
  display: block;
  margin: 10px auto 16px;
  padding: 9px 32px;
  background: #fff;
  border: 1.5px solid var(--tp);
  color: var(--tp);
  border-radius: 6px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.pd-show-all-btn:hover {
  background: var(--tp);
  color: #fff;
}

/* ---- フッター戻るボタンエリア ---- */
.pd-footer-back {
  text-align: right;
  padding: 8px 24px 16px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .pd-footer-back {
    text-align: center;
    padding: 12px 16px 16px;
    display: flex;
    justify-content: center;
  }
  .pd-footer-back .rn2-btn-back {
    width: calc(100% - 32px);
    max-width: 400px;
    padding: 14px 24px;
    font-size: 15px;
    text-align: center;
    box-sizing: border-box;
  }
}

/* ============================================================
   個人成績ページ スタイル整合（アップグレード後のクラス名・抜け補完）
   ============================================================ */

/* プロフィール：上部2段（アバター+名／来店） */
.pd-profile-top {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pd-avatar-name {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pd-name-no {
  font-size: 13px;
  opacity: 0.9;
  display: block;
  margin-bottom: 2px;
  letter-spacing: 0.02em;
}
.pd-name-main {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.25;
  display: block;
}
.pd-visit-pc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 13px;
  opacity: 0.95;
}
.pd-visit-pc strong {
  font-size: 14px;
  font-weight: bold;
}
@media (max-width: 768px) {
  .pd-visit-pc { display: none; }
}

/* 本日の成績：PC / SP 切替（両方に .pd-today-block が付く） */
.pd-today-pc { display: block; }
.pd-today-sp.pd-today-block { display: none; }
@media (max-width: 768px) {
  .pd-today-pc { display: none !important; }
  .pd-today-sp.pd-today-block { display: block !important; }
}

/* 本日の順位バッジ（JS が pd-jw 等を生成） */
.pd-juni-badges-pc,
.pd-juni-badges-sp {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 2px 4px;
}
.pd-jw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
  min-width: 40px;
}
.pd-j-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.pd-j-lbl {
  font-size: 9px;
  color: #888;
  white-space: nowrap;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-j-arr {
  font-size: 16px;
  color: #ccc;
  padding-bottom: 14px;
  align-self: flex-end;
  line-height: 1;
}
.pd-j-new {
  background: #e02020;
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.4;
}
.pd-j-sp-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pd-j-sp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}
.pd-j-sp-new-wrap { display: inline-flex; align-items: center; gap: 4px; }
.pd-j-sp-new { font-size: 9px; font-weight: bold; color: #e02020; }
.pd-j-sep { color: #ccc; font-size: 12px; padding: 0 2px; }

/* 月間・年別：小アコーディオン（期間ドロップ） */
.pd-mini-ac {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: bold;
  color: var(--tp);
  background: #fff;
  border: 1.5px solid #dde3ed;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  transition: border-color .15s, box-shadow .15s;
}
.pd-mini-ac:hover { border-color: #c5cedd; }
.pd-mini-ac.open {
  border-color: var(--tp);
  box-shadow: 0 0 0 1px rgba(47, 79, 127, 0.12);
}
.pd-mini-ac-caret {
  font-size: 10px;
  color: #888;
  transition: transform .15s;
}
.pd-mini-ac.open .pd-mini-ac-caret { transform: rotate(180deg); }
.pd-mini-ac-drop {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: auto;
  min-width: 200px;
  max-width: min(320px, 92vw);
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #dde3ed;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
  z-index: 80;
  -webkit-overflow-scrolling: touch;
}
.pd-mini-ac.open > .pd-mini-ac-drop { display: block; }
.pd-mac-opt {
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #333;
}
.pd-mac-opt:last-child { border-bottom: none; }
.pd-mac-opt:hover { background: #f8f9fc; }
.pd-mac-opt.sel {
  background: #eef4ff;
  color: var(--tp);
  font-weight: bold;
}
.pd-mac-check {
  font-size: 12px;
  color: var(--tp);
  opacity: 0;
}
.pd-mac-opt.sel .pd-mac-check { opacity: 1; }
.pd-mac-more {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--tp);
  cursor: pointer;
  font-weight: bold;
  border-top: 1px dashed #e5e9f0;
}
.pd-mac-more:hover { background: #fafbfd; }

/* 年別セクションの NEW バッジ（HTML は .rn2-new-badge） */
.rn2-new-badge {
  display: inline-block;
  background: #e02020;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/* 役満・表彰（HTML: pd-yaku-*, pd-award-*／旧名 pd-yakuman-* と併用） */
.pd-yakuman-block,
.pd-yaku-block,
.pd-award-block {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--tp);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  align-items: flex-end;
  transition: background .3s;
}
.pd-yakuman-item,
.pd-yaku-item,
.pd-award-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}
.pd-yakuman-item a,
.pd-yaku-item a,
.pd-award-item a {
  display: block;
  line-height: 0;
}
.pd-yakuman-svg,
.pd-yaku-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.pd-yakuman-item img:not(.pd-yakuman-svg),
.pd-yaku-item img:not(.pd-yaku-img) {
  width: 64px;
  height: auto;
}
.pd-award-item img {
  max-width: 120px;
  height: auto;
  display: block;
}
.pd-yakuman-cnt {
  font-size: 13px;
  font-weight: bold;
  color: #fff;
}
.pd-notif-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  background: #e85a24;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  z-index: 2;
  border: 2px solid #fff;
}

/* 役満・表彰：データなし時のプレースホルダー（全期間〜統計グラフの間を空にしない） */
.pd-yaku-block-empty,
.pd-award-block-empty {
  align-items: center;
  justify-content: center;
  min-height: 72px;
  align-content: center;
}
.pd-yaku-block .pd-section-empty,
.pd-award-block .pd-section-empty {
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.9);
}

/* 連続記録（HTML: pd-streak-pc / pd-streak-sp）— 案A: グラデ枠付きカード強化版 */
.pd-streak-pc {
  display: grid;
  grid-template-columns: repeat(6, 1fr);  /* PC: 6項目を横一列 */
  gap: 10px;
  margin-bottom: 18px;
  background: #fff;
  padding: 14px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.pd-streak-pc .pd-streak-item {
  background: linear-gradient(135deg, #f4f7fb, #fff);
  border: 1px solid #e1e8f0;
  border-radius: 10px;
  padding: 14px 6px;
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  min-width: 0;
}
.pd-streak-pc .pd-streak-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,55,101,0.14);
  border-color: #003765;
}
.pd-streak-lbl {
  font-size: 12px;
  color: #666;
  display: block;
  margin-bottom: 8px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.pd-streak-val {
  font-size: 32px;
  font-weight: 800;
  color: #003765;
  line-height: 1.1;
  word-break: break-all;
  font-variant-numeric: tabular-nums;
  display: block;
}
.pd-streak-unit {
  font-size: 12px;
  color: #999;
  margin-left: 2px;
  font-weight: 500;
  vertical-align: baseline;
}
.pd-streak-sp { display: none; }
@media (max-width: 768px) {
  .pd-streak-pc { display: none; }
  .pd-streak-sp {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));  /* SP: 横3 (6項目を3×2) */
    gap: 8px;
    margin-bottom: 18px;
    background: #fff;
    padding: 8px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  .pd-streak-sp-item {
    background: linear-gradient(135deg, #f4f7fb, #fff);
    border: 1px solid #e1e8f0;
    border-radius: 10px;
    padding: 12px 4px;
    text-align: center;
    min-width: 0;
  }
  .pd-streak-sp-lbl {
    font-size: 11px;
    color: #666;
    margin-bottom: 6px;
    line-height: 1.3;
    font-weight: 500;
  }
  .pd-streak-sp-val {
    font-size: 26px;
    font-weight: 800;
    color: #003765;
    word-break: break-all;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    display: block;
  }
  /* SP用 unit を少し小さく */
  .pd-streak-sp-val .pd-streak-unit,
  .pd-streak-sp-item .pd-streak-unit {
    font-size: 11px !important;
  }
}

/* 個人ページのメイン：下まで余白 */
body.rn2 .rn2-content {
  padding-bottom: 28px;
}

/* ----------------------------------------------------------
   個人成績ページ: stylemh.css を読まない前提の最低限スタイル
   （フッター・対戦成績 AJAX 枠・PC 対戦表は旧クラス名のまま）
   ---------------------------------------------------------- */
body.rn2 .foot {
  padding: 12px 0;
  text-align: center;
  width: 100%;
  border-top: 1px solid #dde3ed;
  background: #fff;
}
body.rn2 .foottitle {
  color: #888;
  font-size: 12px;
  padding: 8px 16px;
  text-align: center;
}
body.rn2 .table__basic__box {
  border-left: none;
  border-radius: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}
@media (max-width: 799px) {
  body.rn2 .table__basic__box {
    overflow-x: auto;
    white-space: nowrap;
  }
}
body.rn2 .personal-taisen-loading-msg,
body.rn2 .personal-taisen-err {
  padding: 24px 16px;
  text-align: center;
  font-size: 14px;
  color: #666;
}
body.rn2 .personal-taisen-err {
  color: #b00020;
}

/* ---------- 対戦成績ブロック（個人ページ） ---------- */
body.rn2 .pd-taisen-section {
  margin-top: 8px;
  margin-bottom: 8px;
}
body.rn2 .pd-taisen-wrap-pc {
  margin-bottom: 8px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
body.rn2 .pd-taisen-wrap-pc .table__basic__box {
  box-shadow: none;
  background: transparent;
  margin: 0;
}

/* PC 対戦表（Ajax 後は #personal-taisen-wrap 直下に table のみ置かれていたためセレクタが外れていた → JS で .table__basic__box > .taisen-ajax-root を復元。両系にマッチするよう二重指定） */
body.rn2 .pd-taisen-wrap-pc table.pd-taisen-tbl-pc,
body.rn2 .taisen-ajax-root table.pd-taisen-tbl-pc {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  min-width: 720px;
  margin: 0;
}
body.rn2 .pd-taisen-wrap-pc table.pd-taisen-tbl-pc thead th,
body.rn2 .taisen-ajax-root table.pd-taisen-tbl-pc thead th {
  background: var(--theme-primary);
  color: #fff;
  padding: 12px 10px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: none;
}
body.rn2 .pd-taisen-wrap-pc table.pd-taisen-tbl-pc thead th:first-child,
body.rn2 .taisen-ajax-root table.pd-taisen-tbl-pc thead th:first-child {
  text-align: left;
  padding-left: 16px;
}
body.rn2 .pd-taisen-wrap-pc table.pd-taisen-tbl-pc thead th:last-child,
body.rn2 .taisen-ajax-root table.pd-taisen-tbl-pc thead th:last-child {
  border-right: none;
  padding-right: 14px;
}
body.rn2 .pd-taisen-wrap-pc table.pd-taisen-tbl-pc tbody td,
body.rn2 .taisen-ajax-root table.pd-taisen-tbl-pc tbody td {
  padding: 11px 10px;
  vertical-align: middle;
  border-bottom: 1px solid #e8ecf4;
  border-right: 1px solid #eef0f5;
  text-align: right;
  color: #1e293b;
}
body.rn2 .pd-taisen-wrap-pc table.pd-taisen-tbl-pc tbody tr:last-child td,
body.rn2 .taisen-ajax-root table.pd-taisen-tbl-pc tbody tr:last-child td {
  border-bottom: none;
}
body.rn2 .pd-taisen-wrap-pc table.pd-taisen-tbl-pc tbody td:last-child,
body.rn2 .taisen-ajax-root table.pd-taisen-tbl-pc tbody td:last-child {
  border-right: none;
}
body.rn2 .pd-taisen-wrap-pc table.pd-taisen-tbl-pc tbody td:first-child,
body.rn2 .taisen-ajax-root table.pd-taisen-tbl-pc tbody td:first-child {
  text-align: left;
  padding-left: 16px;
  font-weight: 600;
}
body.rn2 .pd-taisen-wrap-pc table.pd-taisen-tbl-pc tbody tr.pd-taisen-tr-alt td:nth-child(1),
body.rn2 .pd-taisen-wrap-pc table.pd-taisen-tbl-pc tbody tr.pd-taisen-tr-alt td:nth-child(2),
body.rn2 .pd-taisen-wrap-pc table.pd-taisen-tbl-pc tbody tr.pd-taisen-tr-alt td:nth-child(3),
body.rn2 .pd-taisen-wrap-pc table.pd-taisen-tbl-pc tbody tr.pd-taisen-tr-alt td:nth-child(4),
body.rn2 .pd-taisen-wrap-pc table.pd-taisen-tbl-pc tbody tr.pd-taisen-tr-alt td:nth-child(6),
body.rn2 .taisen-ajax-root table.pd-taisen-tbl-pc tbody tr.pd-taisen-tr-alt td:nth-child(1),
body.rn2 .taisen-ajax-root table.pd-taisen-tbl-pc tbody tr.pd-taisen-tr-alt td:nth-child(2),
body.rn2 .taisen-ajax-root table.pd-taisen-tbl-pc tbody tr.pd-taisen-tr-alt td:nth-child(3),
body.rn2 .taisen-ajax-root table.pd-taisen-tbl-pc tbody tr.pd-taisen-tr-alt td:nth-child(4),
body.rn2 .taisen-ajax-root table.pd-taisen-tbl-pc tbody tr.pd-taisen-tr-alt td:nth-child(6) {
  background: #f4f7fc;
}
body.rn2 .pd-taisen-wrap-pc table.pd-taisen-tbl-pc .pd-taisen-name,
body.rn2 .taisen-ajax-root table.pd-taisen-tbl-pc .pd-taisen-name {
  color: var(--theme-primary);
  font-weight: 700;
  text-decoration: underline;  /* 常時アンダーラインで「クリックできる」ことを明示 */
}
body.rn2 .pd-taisen-wrap-pc table.pd-taisen-tbl-pc .pd-taisen-name:hover,
body.rn2 .taisen-ajax-root table.pd-taisen-tbl-pc .pd-taisen-name:hover {
  text-decoration: underline;
  opacity: 0.88;
}

/* SP側: PCと同じ落ち着いた色に統一（ブラウザデフォルト青を上書き） */
body.rn2 .pd-taisen-tbl-sp .pd-taisen-name,
body.rn2 .taisen-ajax-root table.pd-taisen-tbl-sp .pd-taisen-name {
  color: var(--theme-primary);
  font-weight: 700;
  text-decoration: underline;
}
body.rn2 .pd-taisen-tbl-sp .pd-taisen-name:hover,
body.rn2 .taisen-ajax-root table.pd-taisen-tbl-sp .pd-taisen-name:hover {
  text-decoration: underline;
  opacity: 0.88;
}


/* ============================================================
   対戦分析ページ (analysis_new.inc) 専用スタイル
   ============================================================ */

/* ===== 対戦ヘッダー ===== */
.an-vs-header {
  display: flex;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #dde3ed;
  padding: 12px 12px;
  flex-wrap: wrap;       /* eval-cardだけ折り返し許可 */
  gap: 8px;
}
/* pl1+vs+pl2 を常に1行 */
.an-vs-players {
  display: flex;
  align-items: center;
  justify-content: center;   /* 中央寄せ */
  flex: 1;
  min-width: 0;
  gap: 8px;
  flex-wrap: nowrap;
}
.an-player-card {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 140px;
}
.an-player-card-right {
  flex-direction: row-reverse;
  text-align: right;
}
.an-player-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--tp-lt);
  border: 2px solid var(--tp);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: bold;
  color: var(--tp);
  flex-shrink: 0;
  transition: background .3s, border-color .3s, color .3s;
}
.an-player-info { display: flex; flex-direction: column; gap: 2px; }
.an-player-info-right { align-items: flex-end; }
.an-player-no { font-size: 11px; color: #888; }
.an-player-name { font-size: 24px; font-weight: bold; color: #111; }
.an-vs-mid {
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; flex-shrink: 0;  /* 間隔を最小に */
}
.an-vs-label {
  font-size: 22px; font-weight: bold;
  color: var(--tp);
  background: var(--tp-lt);
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, color .3s;
}
.an-eval-card {
  min-width: 380px;
  padding: 18px 50px;
  background: #f5f6fa;
  border-radius: 12px;
  border: 1px solid #dde3ed;
  text-align: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,55,101,.06);
}
.an-eval-title { font-size: 14px; color: #555; margin-bottom: 6px; font-weight: 600; }
.an-eval-label { font-size: 30px; font-weight: bold; margin-bottom: 6px; color: var(--tp); }
.an-eval-sub { font-size: 14px; color: #666; margin-bottom: 12px; }
/* ゲージ */
.an-gauge-wrap { margin-top: 6px; }
.an-gauge-bg {
  position: relative;
  height: 10px;
  background: linear-gradient(to right, rgba(75,150,255,.5) 0%, rgba(200,200,200,.5) 50%, rgba(255,75,75,.5) 100%);
  border-radius: 5px;
  overflow: visible;
}
.an-gauge-needle {
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  width: 4px; height: 18px;
  background: #333;
  border-radius: 2px;
  transition: left .5s ease;
}
.an-gauge-labels {
  display: flex; justify-content: space-between;
  font-size: 9px; color: #aaa; margin-top: 3px;
}

/* ===== 対戦サマリーバー ===== */
.an-summary-bar {
  display: flex;
  background: var(--tp);
  color: #fff;
  flex-wrap: wrap;
  transition: background .3s;
}
.an-sum-item {
  flex: 1;
  padding: 14px 12px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.15);
  min-width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.an-sum-item:last-child { border-right: none; }
.an-sum-label { font-size: 11px; opacity: .8; margin-bottom: 4px; white-space: nowrap; }
.an-sum-val { font-size: 36px; font-weight: bold; line-height: 1.1; }
.an-sum-main { font-size: 28px; }
.an-sum-win  { color: #7ec8f0; }
.an-sum-lose { color: #f0a080; }
.an-sum-plus { color: #7ef0a0; }
.an-sum-minus{ color: #f07070; }
.an-sum-sub  { font-size: 11px; opacity: .7; margin-top: 2px; }
.an-sum-suffix { font-size: 0.5em; font-weight: normal; opacity: 0.85; margin-left: 2px; }

/* ===== コンテンツ共通 ===== */
.an-sec-note {
  font-size: 12px; color: #888; font-weight: normal;
  margin-left: 4px;
}
.an-chart-legend {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: #555; margin-left: auto;
}
.an-leg-line {
  display: inline-block; width: 24px; height: 3px;
  background: rgba(30,90,180,1); border-radius: 2px; vertical-align: middle;
}
.an-leg-bar {
  display: inline-block; width: 14px; height: 14px;
  background: rgba(75,150,255,.6); border-radius: 2px; vertical-align: middle;
}

/* ===== 全期間の成績グリッド ===== */
.an-allstats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 768px) {
  .an-allstats-grid { grid-template-columns: 1fr; }
}
.an-allstats-card {
  background: #fff;
  border-radius: 0 0 10px 10px;  /* 上は角張り、下だけ丸める */
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  padding: 14px;
  border-top: 3px solid var(--tp);
  transition: border-color .3s;
}
.an-card-p1 { border-top-color: #003765; }
.an-card-p2 { border-top-color: #c05a1a; }
.theme-gray .an-card-p1 { border-top-color: #4a4a4a; }
.theme-gray .an-card-p2 { border-top-color: #888; }
.an-allstats-name {
  font-size: 13px; font-weight: bold; color: #333;
  margin-bottom: 10px;
}
.an-stats-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.an-stats-tbl thead th {
  background: var(--tp); color: #fff;
  padding: 6px 8px; text-align: center;
  font-weight: bold; white-space: nowrap;
  transition: background .3s;
}
.an-stats-tbl tbody td {
  padding: 8px 8px; text-align: center;
  border-bottom: 1px solid #f0f0f5; white-space: nowrap;
}

/* ===== 年別サマリー ===== */
.an-year-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.an-year-card {
  flex: 1; min-width: 90px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  padding: 14px 16px;
}
.an-year-label {
  font-size: 16px; font-weight: bold; color: var(--tp);
  margin-bottom: 12px;
  transition: color .3s;
}
.an-year-stats { margin-bottom: 10px; }
.an-year-stats > div {
  display: flex; justify-content: space-between;
  font-size: 13px; color: #555; padding: 5px 0;
  border-bottom: 1px solid #f0f0f5;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.an-year-key { color: #888; font-size: 12px; white-space: nowrap; }
.an-year-val { font-weight: bold; color: #222; font-size: 20px; white-space: nowrap; }
.an-plus { color: #0d7a3e; }
.an-minus { color: #b01020; }
.an-year-eval {
  font-size: 14px; font-weight: bold; text-align: center;
  padding: 7px 10px; border-radius: 5px;
}

/* ===== 月別テーブル ===== */
.an-monthly-tbl { width: 100%; min-width: 500px; border-collapse: collapse; font-size: 12px; }
.an-monthly-tbl thead th {
  background: var(--tp); color: #fff;
  padding: 7px 8px; text-align: center; font-weight: bold;
  white-space: nowrap; transition: background .3s;
}
.an-monthly-tbl tbody td { padding: 7px 8px; text-align: center; white-space: nowrap; }
.an-monthly-tbl tbody td:first-child { text-align: left; font-weight: bold; }

/* ===== チャートエリア ===== */
.an-chart-wrap {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  padding: 16px;
  margin-bottom: 14px;

  height: 280px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.an-chart-wrap canvas {
  max-width: 100% !important;
  max-height: 100% !important;
}

/* ===== 評価カラー ===== */
.an-eval-cell { text-align: center; font-weight: bold; }
.an-eval-win2  { color: #0d7a3e; }
.an-eval-win1  { color: #1a7ac0; }
.an-eval-even  { color: #666; }
.an-eval-lose1 { color: #c05a1a; }
.an-eval-lose2 { color: #b01020; }
.an-eval-bg-win2  { background: rgba(13,122,62,.08); }
.an-eval-bg-win1  { background: rgba(26,122,192,.08); }
.an-eval-bg-even  { background: transparent; }
.an-eval-bg-lose1 { background: rgba(192,90,26,.08); }
.an-eval-bg-lose2 { background: rgba(176,16,32,.08); }

/* ===== 注釈 ===== */
.an-notice {
  font-size: 12px; color: #aaa; text-align: center;
  margin: 16px 0 8px; padding: 0 16px;
}

/* ===== SP対応 ===== */
@media (max-width: 768px) {
  .an-vs-header { padding: 14px 12px; gap: 8px; }
  .an-player-name { font-size: 18px; }
  .an-eval-card { width: 100%; min-width: unset; }
  .an-summary-bar { flex-wrap: wrap; }
  .an-sum-item { flex: 1 1 45%; border-bottom: 1px solid rgba(255,255,255,.15); }
  .an-sum-val,
  .an-sum-cnt { font-size: 32px !important; }
  .an-sum-suffix { font-size: 14px !important; }
  .an-sum-label { font-size: 12px !important; }
  .an-sum-sub { font-size: 11px !important; }
  .an-year-card { min-width: 130px; }
  .an-chart-legend { flex-wrap: wrap; margin-left: 0; }
  .an-vs-mid { width: 100%; justify-content: center; }
  .an-player-card,.an-player-card-right { flex: 1 1 40%; }
}

/* ============================================================
   対戦分析ページ 追加クラス（v2 - アバター・レイアウト・テーブル）
   ============================================================ */

/* --- VS ヘッダー: プレイヤーレイアウト --- */
.an-pl1 {
  display: flex; align-items: center; gap: 14px;
  flex: 0 0 auto;
}
.an-pl2 {
  display: flex; align-items: center; gap: 14px;
  flex: 0 0 auto;
  flex-direction: row-reverse;
}
.an-pl-info { display: flex; flex-direction: column; gap: 0; }
.an-pl-info-r { align-items: flex-end; }
/* P2(右側)のテキストはアバターに寄せて右揃え */
.an-pl2 .an-pl-info { align-items: flex-end !important; text-align: right !important; }
.an-pl2 .an-pl-no, .an-pl2 .an-pl-name { text-align: right !important; }
.an-pl-no  { font-size: 14px; color: #555; }
.an-pl-name{
  font-size: 32px; font-weight: bold; color: #111;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.1;
}

/* --- アバター（画像あり/なし フォールバック対応） --- */
.an-pl-av {
  width: 96px; height: 96px; border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative;
  font-size: 48px; font-weight: bold; color: #fff;
}
.an-pl-av-1 { background: #c8cdd4; }
.an-pl-av-2 { background: #e8a0b4; }
.an-pl-av img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
  position: absolute; top: 0; left: 0;
}
.an-pl-av img.hidden { display: none; }
.an-av-text { position: relative; z-index: 1; }
.an-pl-av img:not(.hidden) ~ .an-av-text { display: none; }

/* --- VS バッジ --- */
.an-vs-lbl {
  font-size: 14px; font-weight: bold; color: #666;
  background: #f0f2f6; border: 2px solid #d0d4de;
  width: 38px; height: 38px; border-radius: 50%;  /* 小さく */
  display: flex; align-items: center; justify-content: center;
}

/* --- 総合評価カード --- */
.an-eval-ttl { font-size: 14px; color: #666; font-weight: bold; margin-bottom: 8px; letter-spacing: 0.5px; }
.an-eval-lbl { font-size: 32px; font-weight: bold; margin-bottom: 8px; letter-spacing: 0.5px; }
.an-gauge-lbls {
  display: flex; justify-content: space-between;
  font-size: 12px; color: #555; margin-top: 5px; font-weight: 600;
}

/* --- サマリーバー: 対戦回数（バー背景が濃色のため明るい字色） --- */
.an-sum-cnt {
  font-size: 26px;
  font-weight: bold;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* --- 全期間の成績: テーブルスクロール --- */
.an-st-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- 年別サマリー: 本年度ラベル・大カード --- */
.an-year-note { font-size: 11px; color: #888; font-weight: normal; margin-left: 4px; }
.an-year-label-main { font-size: 18px; }
.an-year-card-main  {
  grid-column: span 2;   /* PC版: 2枠分 */
  padding: 18px 22px;
}

/* --- 月別テーブル PC版（横スクロール・評価なし） --- */
.an-mo-wrap-pc {
  overflow-x: auto; border-radius: 10px;
  border: 1px solid #e0e4ed; background: #fff; margin-bottom: 12px;
}
.an-mo-tbl-pc {
  width: 100%; min-width: 400px;
  border-collapse: collapse; font-size: 12px;
}
.an-mo-tbl-pc thead th {
  background: var(--tp); color: #fff;
  padding: 8px 12px; text-align: center;
  font-weight: bold; white-space: nowrap; transition: background .3s;
}
.an-mo-tbl-pc tbody td {
  padding: 8px 12px; text-align: center;
  white-space: nowrap; border-bottom: 1px solid #f0f0f5;
}
.an-mo-tbl-pc tbody td:first-child { text-align: left; font-weight: bold; color: #333; }
.an-mo-tbl-pc tbody td:last-child  { text-align: right; padding-right: 14px; }

/* --- 月別テーブル SP版（スクロールなし・幅いっぱい・評価なし） --- */
.an-mo-wrap-sp {
  border-radius: 10px; border: 1px solid #e0e4ed;
  background: #fff; margin-bottom: 12px; overflow: hidden;
  display: none;  /* PC時は非表示（media queryで切替） */
}
.an-mo-tbl-sp {
  width: 100%; border-collapse: collapse;
  font-size: 11px; table-layout: fixed;
}
.an-mo-tbl-sp thead th {
  background: var(--tp); color: #fff;
  padding: 7px 4px; text-align: center;
  font-weight: bold; white-space: nowrap; transition: background .3s;
}
.an-mo-tbl-sp tbody td {
  padding: 7px 4px; text-align: center;
  border-bottom: 1px solid #f0f0f5; overflow: hidden; white-space: nowrap;
}
.an-mo-tbl-sp tbody td:first-child { text-align: left; font-weight: bold; color: #333; padding-left: 8px; }
.an-mo-tbl-sp tbody td:last-child  { text-align: right; padding-right: 6px; font-weight: bold; }

/* PC/SP 切替 */
@media (max-width: 768px) {
  .an-mo-wrap-pc { display: none; }
  .an-mo-wrap-sp { display: block; }
  .an-year-card-main { grid-column: span 1; }  /* SP: 1列に戻す */
  .an-pl-name { font-size: 20px; }
}

/* --- rn2-sec-row / rn2-sec-title（analysis_new.inc 用） --- */
/* 既存の pd-* に相当する汎用セクション見出し */
.rn2-sec-row {
  display: flex; align-items: center; gap: 8px;
  margin: 20px 0 10px; padding-left: 2px; flex-wrap: wrap;
}
.rn2-sec-row::before {
  content: ''; display: inline-block;
  width: 4px; height: 17px;
  background: var(--sec); border-radius: 2px; flex-shrink: 0;
  transition: background .3s;
}
.rn2-sec-title { font-size: 15px; font-weight: bold; color: #111; }

/* --- pd-back-btn（analysis_new.inc で使用） --- */
.pd-back-btn { flex-shrink: 0; }

/* ============================================================
   個人成績ページ アバター画像対応（personaldetail_new.inc）
   フォルダ: ranking/avatar/XXXXX.png（5桁ゼロ埋め）
   画像なし時: onerror → img.hidden → .av-text（名前1文字）を表示
   ============================================================ */
.pd-avatar {
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255,255,255,.25);
  border: 2.5px solid rgba(255,255,255,.6);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: bold; color: #fff;
  flex-shrink: 0;
  overflow: hidden; position: relative;
}
.pd-avatar img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
  position: absolute; top: 0; left: 0;
}
.pd-avatar img.hidden { display: none; }
.pd-avatar .av-text   { position: relative; z-index: 1; }
.pd-avatar img:not(.hidden) ~ .av-text { display: none; }

/* ============================================================
   対戦成績テーブル ボタン（分析・個人成績）
   ============================================================ */
.pd-btn-analysis {
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--tp);
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
  transition: opacity .15s, transform .1s;
}
.pd-btn-analysis:hover { opacity: .9; }
.pd-btn-analysis:active { transform: scale(0.98); }
.pd-btn-personal {
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tp);
  background: #fff;
  border: 1.5px solid var(--tp);
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  margin-left: 6px;
  transition: background .15s, color .15s, border-color .15s;
}
.pd-btn-personal:hover { background: var(--tp); color: #fff; }
/* ボタン2つを並べるセル */
.pd-taisen-btn-cell {
  white-space: nowrap;
  text-align: center;
  padding: 10px 8px !important;
}

/* ============================================================
   SP追加修正（スクショフィードバック対応）
   ============================================================ */

/* 対戦分析VSヘッダー: SP版でアバターを小さく */
@media (max-width: 640px) {
  .an-vs-header { padding: 10px 8px; gap: 4px; }
  .an-pl-av { width: 44px !important; height: 44px !important; font-size: 18px !important; }
  .an-pl-name { font-size: 16px !important; }
  .an-pl-no { font-size: 10px !important; }
  .an-vs-lbl { width: 32px !important; height: 32px !important; font-size: 11px !important; }
  .an-eval-card { min-width: unset !important; padding: 10px 12px !important; }
  .an-eval-lbl { font-size: 14px !important; }
}

/* 対戦分析 年別サマリー: SP版でカード内の折り返し防止 */
@media (max-width: 640px) {
  .yr-card { padding: 10px 8px !important; }
  .yr-lbl { font-size: 12px !important; margin-bottom: 6px; }
  .yr-stats > div { font-size: 11px !important; }
  .yr-key { font-size: 10px !important; white-space: nowrap !important; }
  .yr-val { font-size: 10px !important; white-space: nowrap !important; }
  .yr-eval { font-size: 10px !important; padding: 4px 6px !important; }
  /* 年別グリッドを3列横並びに */
  .yr-grid-sp { display: none !important; }
  .yr-grid-pc {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .yr-card-main { grid-column: span 1 !important; padding: 10px 8px !important; }
  .yr-lbl-main { font-size: 13px !important; }
}

/* 受賞一覧 SP版: 名前テキストを縮小 + ellipsis */
@media (max-width: 640px) {
  .pz-tbl-sp .pz-lk { font-size: 16px !important; }
  .pz-tbl-sp .pz-sp-sc { font-size: 20px !important; font-weight: bold !important; }
  .pz-tbl-sp tbody td { padding: 9px 3px !important; }
  .pz-tbl-sp .pz-medal { width: 28px !important; height: 28px !important; font-size: 14px !important; margin-right: 3px !important; }
}

/* 個人成績: 本日の成績を中央揃え（PC・SP共通） */
.pd-today-block { justify-content: center !important; }
.pd-today-inner { justify-content: center !important; width: 100%; }
.pd-today-score-col { text-align: center !important; }
.pd-today-juni-col { text-align: center !important; min-width: 0; }
.pd-today-head { justify-content: center !important; }
@media (max-width: 768px) {
  .pd-today-block { justify-content: center !important; }
  .pd-today-inner { justify-content: center !important; }
  .pd-today-score-col { text-align: center !important; }
  .pd-today-juni-col { text-align: center !important; }
  .pd-today-head { justify-content: center !important; }
}

/* ============================================================
   SP追加修正 v2（スクショフィードバック 8枚対応）
   ============================================================ */

/* 問題1: rn2-table はみ出し禁止・全表示（月間個人成績表と同じサイズ） */
@media (max-width: 768px) {
  .rn2-table { table-layout: fixed !important; width: 100% !important; border-collapse: collapse !important; }
  .rn2-table thead th { font-size: 14px !important; font-weight: bold !important; padding: 8px 2px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .rn2-table tbody td { font-size: 16px !important; padding: 7px 3px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  
  .rn2-table thead th:first-child,
  .rn2-table tbody td:first-child { width: 32px !important; padding: 7px 0 !important; text-align: center !important; }
  
  .rn2-table tbody td:nth-child(2) { padding: 7px 4px !important; }
  .rn2-table thead th:nth-child(2) { padding: 8px 4px !important; }
  
  /* 1位/2位/3位/4位 列(順位率テーブル用)を狭く */
  .rn2-table thead th:nth-child(3),
  .rn2-table thead th:nth-child(4),
  .rn2-table thead th:nth-child(5),
  .rn2-table thead th:nth-child(6),
  .rn2-table tbody td:nth-child(3),
  .rn2-table tbody td:nth-child(4),
  .rn2-table tbody td:nth-child(5),
  .rn2-table tbody td:nth-child(6) { width: 34px !important; text-align: center !important; padding: 7px 1px !important; }
  
  .rn2-table tbody td.rn2-td-num { font-size: 16px !important; padding: 7px 1px !important; text-align: center !important; font-variant-numeric: tabular-nums !important; }
  
  .rn2-rank { width: 24px !important; height: 24px !important; font-size: 11px !important; }
}

/* 問題3: VS ヘッダー SP版横1行固定 */
@media (max-width: 640px) {
  .an-vs-header { padding: 10px 8px !important; gap: 6px !important; flex-wrap: wrap !important; }
  .an-vs-players { display: flex; align-items: center; flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; gap: 4px; order: 1; }
  .an-eval-card { order: 2; width: 100%; min-width: unset !important; padding: 10px 14px !important; }
  .an-pl1, .an-pl2 { flex: 0 0 auto; }
  .an-pl-av { width: 44px !important; height: 44px !important; font-size: 18px !important; }
  .an-pl-name { font-size: 16px !important; }
  .an-vs-mid { padding: 0 2px !important; }
  .an-vs-lbl { width: 32px !important; height: 32px !important; font-size: 11px !important; }
}

/* 問題4: 年別サマリー SP版3列 テキスト折り返し修正 */
@media (max-width: 640px) {
  .an-year-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .an-year-card { min-width: 0 !important; padding: 8px 6px !important; }
  .an-year-card-main { grid-column: span 1 !important; padding: 8px 6px !important; }
  .an-year-label { font-size: 12px !important; margin-bottom: 6px; }
  .an-year-label-main { font-size: 13px !important; }
  .an-year-stats > div { font-size: 13px !important; gap: 3px; flex-direction: column; align-items: flex-start; padding: 5px 0; }
  .an-year-key { font-size: 12px !important; color: #888; white-space: nowrap; }
  .an-year-val { font-size: 18px !important; white-space: nowrap; font-weight: bold; }
  .an-year-eval { font-size: 10px !important; padding: 3px 6px !important; }
}

/* 問題5: 受賞一覧 SP版テーブル 名前切れ修正 */
@media (max-width: 640px) {
  .pz-tbl-sp thead th { font-size: 12px !important; padding: 9px 3px !important; }
  .pz-tbl-sp tbody td { padding: 10px 4px !important; }
  .pz-tbl-sp .pz-lk { font-size: 16px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block !important; max-width: 100px; font-weight: bold !important; }
  .pz-tbl-sp .pz-sp-sc { font-size: 20px !important; font-weight: bold !important; color: #222 !important; }
  .pz-tbl-sp .pz-medal { width: 28px !important; height: 28px !important; font-size: 14px !important; margin-right: 3px !important; }
  /* 列幅: 年月 20%, 各位 26.6% */
  .pz-tbl-sp thead th:nth-child(1) { width: 20% !important; }
  .pz-tbl-sp thead th:nth-child(2),
  .pz-tbl-sp thead th:nth-child(3),
  .pz-tbl-sp thead th:nth-child(4) { width: 26.6% !important; }
}

/* ============================================================
   個人成績 SP版対戦成績テーブル（5列）
   ============================================================ */
.pd-taisen-sp { display: none; }  /* PC時は非表示 */
.pd-taisen-wrap-sp {
  overflow-x: hidden;  /* 横スクロール無効、画面内に必ず収める */
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
  background: #fff;
  margin-bottom: 12px;
}
.pd-taisen-tbl-sp {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  table-layout: fixed;  /* 列幅を固定して画面内に収める */
}
.pd-taisen-tbl-sp thead th {
  background: var(--tp);
  color: #fff;
  padding: 10px 3px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  transition: background .3s;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.pd-taisen-tbl-sp thead th:last-child { border-right: none; }
.pd-taisen-tbl-sp thead th:first-child { text-align: left; padding-left: 14px; }
.pd-taisen-tbl-sp tbody tr { border-bottom: 1px solid #e8ecf4; }
.pd-taisen-tbl-sp tbody tr:last-child { border-bottom: none; }
.pd-taisen-tbl-sp tbody td {
  padding: 10px 4px;
  vertical-align: middle;
  white-space: nowrap;
  color: #1e293b;
}
/* 名前列(1列目): 長い名前は省略表示 */
.pd-taisen-tbl-sp tbody td:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}
.pd-taisen-tbl-sp tbody td:first-child .pd-taisen-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
}
.pd-taisen-tbl-sp tbody tr.pd-taisen-tr-alt td:nth-child(1),
.pd-taisen-tbl-sp tbody tr.pd-taisen-tr-alt td:nth-child(2),
.pd-taisen-tbl-sp tbody tr.pd-taisen-tr-alt td:nth-child(3),
.pd-taisen-tbl-sp tbody tr.pd-taisen-tr-alt td:nth-child(4) {
  background: #f4f7fc;
}
.pd-taisen-tbl-sp tbody td:first-child { text-align: left; padding-left: 10px; font-weight: 600; }
.pd-taisen-tbl-sp thead th:first-child { padding-left: 10px !important; }
.pd-tc-num { text-align: center; }
/* 獲得ポイント差セル: バー+数字 */
.pd-tc-bar {
  text-align: right;
  padding-right: 6px !important;
  min-width: 60px;
  position: relative;
}
.pd-sp-bar-wrap-full {
  position: relative;
  height: 6px;
  background: #f0f0f5;
  border-radius: 3px;
  margin-bottom: 3px;
  overflow: hidden;
}
.pd-sp-bar-pos {
  position: absolute;
  top: 0; height: 100%;
  background: rgba(75,150,255,0.65);
  border-radius: 3px;
}
.pd-sp-bar-neg {
  position: absolute;
  top: 0; height: 100%;
  background: rgba(255,75,75,0.65);
  border-radius: 3px;
}
/* 左右固定: 名前列をsticky */
@media (max-width: 768px) {
  /* PC版テーブルと「すべて表示」ボタンをSPで非表示 */
  .pd-taisen-wrap-pc { display: none; }
  #pd-open-all { display: none; }
  /* SP版テーブルを表示 */
  .pd-taisen-sp { display: block; }
  /* 対戦者列をsticky左固定 */
  .pd-taisen-tbl-sp thead th:first-child {
    position: sticky; left: 0; z-index: 3; background: var(--tp);
  }
  .pd-taisen-tbl-sp tbody td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: #fff;
  }
  .pd-taisen-tbl-sp tbody tr.pd-taisen-tr-alt td:first-child {
    background: #f4f7fc;
  }
  /* SP版「すべて表示」ボタン */
  #pd-open-all-sp {
    display: block;
    margin: 10px auto 16px;
    padding: 9px 32px;
    background: #fff;
    border: 1.5px solid var(--tp);
    color: var(--tp);
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
  }
}

/* ============================================================
   個人成績 称号アイコン（名前横）
   ============================================================ */
.pd-name-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.pd-title-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
  /* 少し立体感を出す */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
  transition: transform .2s;
}
.pd-title-icon:hover {
  transform: scale(1.15);
}

@media (max-width: 768px) {
  .pd-title-icon {
    width: 40px;
    height: 40px;
  }
}

/* 称号テキスト（DBのTITLEカラムから表示） */
/* ランキング表：名前の右に縮小した称号画像 */
.rn2-name-with-title {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  max-width: 100%;
}
.rn2-title-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

.pd-title-text {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: bold;
  color: var(--gold, #D4AF37);
  border: 1.5px solid rgba(212,175,55,.6);
  border-radius: 20px;
  background: rgba(212,175,55,.12);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .04em;
}

/* ============================================================
   合計点ランキング: 1〜5位の行下地色（先祖返り対応）
   ============================================================ */
tr.rn2-row-rank-1 { background: #fdf8ec !important; }   /* 金 */
tr.rn2-row-rank-2 { background: #f1f3f5 !important; }   /* 銀 */
tr.rn2-row-rank-3 { background: #fbeee0 !important; }   /* 銅 */
tr.rn2-row-rank-4 { background: #f3edfa !important; }   /* 紫 */
tr.rn2-row-rank-5 { background: #e8f5ec !important; }   /* 緑 */
/* 個人成績表用 6〜10位（薄め色） */
tr.rn2-row-rank-6 { background: #fefaf2 !important; }   /* 薄金 */
tr.rn2-row-rank-7 { background: #f8f9fb !important; }   /* 薄銀 */
tr.rn2-row-rank-8 { background: #fdf6ee !important; }   /* 薄銅 */
tr.rn2-row-rank-9 { background: #f9f5fc !important; }   /* 薄紫 */
tr.rn2-row-rank-10{ background: #f1f9f3 !important; }   /* 薄緑 */

/* ============================================================
   最近の役満テーブル: 行高さ調整（順位バッジ無しで縦が詰まる対応）
   ============================================================ */
.rn2-yakuman-table tbody td {
  /* レーティング最高値と完全同じ高さ・padding に揃える（段ずれ防止） */
  padding: 8px 8px;
  vertical-align: middle;
  height: 48px;
  box-sizing: border-box;
}
/* 役満画像列を広く */
.rn2-yakuman-table thead th:nth-child(1),
.rn2-yakuman-table tbody td:nth-child(1) {
  width: 100px;
  min-width: 100px;
  padding-right: 16px !important;
}
/* 役満テーブル: 名前列をセンター揃え（通常テーブルの left 上書き） */
.rn2-yakuman-table thead th:nth-child(2),
.rn2-yakuman-table tbody td:nth-child(2) {
  text-align: left !important;
}
.rn2-yakuman-table tbody td:nth-child(1) img {
  /* SVGアスペクト比70:20を維持。高さは22pxで全体行高(46px)に余白を持たせる */
  height: 22px !important;
  width: auto !important;
  vertical-align: middle;
  display: block;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .rn2-yakuman-table tbody td {
    /* スマホ: レーティング最高値と完全同じ padding（段ずれ防止） */
    padding: 13px 7px !important;
  }
  .rn2-yakuman-table thead th:nth-child(1),
  .rn2-yakuman-table tbody td:nth-child(1) {
    width: 90px;
    min-width: 90px;
    padding-right: 14px !important;
  }
  .rn2-yakuman-table tbody td:nth-child(1) img {
    /* SVGアスペクト比70:20を維持。高さは22pxで全体行高に余白を持たせる */
    height: 22px !important;
    width: auto !important;
    display: block;
    margin: 0 auto;
  }
}

/* ============================================================
   統合ツールバー（patch2: ミニマル&シャープ案）
   ============================================================ */
.rn2-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: #fff;
  border-bottom: 1px solid #e8eaef;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rn2-toolbar::-webkit-scrollbar { height: 0; display: none; }

/* ツールバー内のアコーディオン（薄グレー背景＋濃紺文字） */
.rn2-tb-acc {
  flex: 0 0 auto;
  position: relative;
}

/* 条件バー用: 親 .rn2-accordion の overflow:hidden がドロップダウンを切らないようにする */
.rn2-toolbar .rn2-accordion.rn2-tb-acc {
  overflow: visible;
}
.rn2-tb-acc .rn2-accordion-header {
  background: #f4f7fb;
  border: 1px solid #d8e1ed;
  border-radius: 6px;
  padding: 7px 11px;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  color: #003765;
  font-weight: 600;
}
.rn2-tb-acc .rn2-accordion-icon { font-size: 14px; opacity: 0.7; }
.rn2-tb-acc .rn2-accordion-label { display: none; }
.rn2-tb-acc .rn2-accordion-texts {
  display: flex;
  align-items: center;
}
.rn2-tb-acc .rn2-accordion-value {
  font-weight: 600;
  color: #003765;
  font-size: 13px;
}
.rn2-tb-acc .rn2-accordion-caret {
  font-size: 9px;
  color: #999;
  margin-left: 2px;
}

/* アコーディオン展開時：ドロップダウン形式 */
.rn2-tb-acc .rn2-accordion-body {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #fff;
  border: 1px solid #dde3ed;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 100;
  display: none;
  padding: 4px 0;
}
.rn2-tb-acc.open .rn2-accordion-body {
  display: block;
}

/* 月別/年別/全期間 タブ（枠入り型・目立つ） */
.rn2-tb-tabs {
  display: flex;
  align-items: center;
  border: 1.5px solid #003765;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  margin-left: auto;
}
.rn2-tb-tab {
  padding: 6px 14px;
  font-size: 13px;
  color: #003765;
  text-decoration: none;
  font-weight: 600;
  background: #fff;
  letter-spacing: 0.5px;
  transition: background 0.15s, color 0.15s;
  border-right: 1px solid #003765;
}
.rn2-tb-tab:last-child {
  border-right: none;
}
.rn2-tb-tab.active,
.rn2-tb-tab.cursel {
  background: #003765;
  color: #fff;
}

/* 受賞一覧（独立配置：右端、塗り潰しボタン） */
.rn2-tb-prize {
  margin-left: 6px;
  padding: 7px 13px;
  background: #003765;
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  text-decoration: none;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: 0.5px;
  transition: background 0.15s;
}
.rn2-tb-prize:hover { background: #1a5485; }

/* スマホ調整 */
@media (max-width: 768px) {
  .rn2-toolbar {
    padding: 9px 10px;
    gap: 6px;
  }
  .rn2-tb-acc .rn2-accordion-header {
    padding: 6px 9px;
    font-size: 11px;
  }
  .rn2-tb-acc .rn2-accordion-icon { font-size: 12px; }
  .rn2-tb-acc .rn2-accordion-value { font-size: 11px; }
  .rn2-tb-tab {
    padding: 5px 9px;
    font-size: 12px;
  }
  .rn2-tb-prize {
    display: none;
  }
}


/* ============================================================
   個人成績ページ 上部要素のセンタリング
   各要素の内側に pd-inner ラッパーを置き、max-width:1200pxで中央揃え
   ============================================================ */
.pd-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* ヘッダー: grid 子要素として動作 */
.pd-inner-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
/* 親.pd-headerは display:grid を解除（子のpd-inner-headerに任せる） */
.pd-header {
  display: block !important;
  padding: 12px 16px;
}

/* ルール切替バー: flex 子要素として動作 */
.pd-inner-rule-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}
.pd-rule-bar {
  display: block;
}

/* プロフィール: 既存の中身レイアウトはそのまま、外側だけ中央寄せ */
.pd-inner-profile {
  /* ブロック要素として中央配置のみ */
}

/* 来店情報: pd-innerは flex 配置 + センター */
.pd-inner-visit {
  display: flex;
  align-items: center;
  justify-content: center;  /* 左右センター */
  gap: 8px;
  flex-wrap: wrap;
}
.pd-visit-common {
  display: block;
}

/* 本日の成績ブロック: 内部レイアウトは既存の .pd-today-inner / .pd-today-sp-inner に任せる */
.pd-inner-today {
  /* ブロック要素として中央配置のみ */
}
.pd-today-block {
  display: block;
}


/* ============================================================
   対戦分析ページ 上部要素のセンタリング
   ============================================================ */
/* ヘッダー: pd-inner-an-headerはブロック要素として中央寄せのみ */
.pd-inner-an-header {
  text-align: center;
}

/* VSヘッダー: 元の display:flex を pd-inner-an-vs に移管 */
.pd-inner-an-vs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.an-vs-header {
  display: block !important;
  padding: 12px 12px;
}

/* サマリーバー: 元の display:flex を pd-inner-an-sum に移管 */
.pd-inner-an-sum {
  display: flex;
  flex-wrap: wrap;
}
.an-summary-bar {
  display: block !important;
}

/* スマホでの調整 */
@media (max-width: 768px) {
  .an-vs-header {
    padding: 10px 8px !important;
  }
  .pd-inner-an-vs {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
}


/* ============================================================
   対戦分析ページ pd-inner化に伴うSP版調整
   ============================================================ */
@media (max-width: 768px) {
  /* pd-inner-an-vs もwrapを許可 */
  .pd-inner-an-vs {
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100%;
  }
  /* an-vs-players が pd-inner の子として、横一行で確実に収まるよう */
  .pd-inner-an-vs .an-vs-players {
    width: 100%;
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;  /* 両端 */
    gap: 4px;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
  }
  /* P1, P2 が縮みすぎない最小値 */
  .pd-inner-an-vs .an-pl1,
  .pd-inner-an-vs .an-pl2 {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
  }
  .pd-inner-an-vs .an-pl-name {
    font-size: 14px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pd-inner-an-vs .an-pl-av {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }
  .pd-inner-an-vs .an-vs-mid {
    flex: 0 0 auto;
    width: auto !important;
  }
  .pd-inner-an-vs .an-vs-lbl {
    width: 26px !important;
    height: 26px !important;
    font-size: 10px !important;
  }
  /* 評価カードは下に折り返し */
  .pd-inner-an-vs .an-eval-card {
    flex: 1 1 100%;
    width: 100%;
    order: 2;
  }
}


/* ============================================================
   対戦成績テーブル: 数字大きく / 単位小さく (個人成績ページ)
   ============================================================ */
.pd-tc-bignum {
  font-size: 17px;
  font-weight: bold;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
}
.pd-tc-unit {
  font-size: 11px;
  color: #888;
  margin-left: 1px;
  margin-right: 2px;
  font-weight: 500;
}
@media (max-width: 768px) {
  .pd-tc-bignum {
    font-size: 15px;
  }
  .pd-tc-unit {
    font-size: 10px;
  }
}

/* ランキング: LEAGUE のうち PARAMETERID が 1・2 以外は選択不可（表示のみ） */
.rn2-acc-opt-rule--new {
  opacity: 0.72;
  cursor: default;
  border: 1px dashed #cbd5e1;
}

/* ----------------------------------------------------------
   v8 期間ナビ（矢印 + 表示 + グリッドパネル）2-Upgrade/preview.html 準拠
   ---------------------------------------------------------- */
.rn2-toolbar .rn2-seg {
  flex-shrink: 0;
}
.rn2-seg {
  display: inline-flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  overflow: hidden;
  min-height: 40px;
}
.rn2-month-nav {
  flex-shrink: 0;
}
.rn2-nav-arrow {
  background: #fff;
  border: none;
  padding: 0 11px;
  font-size: 16px;
  color: var(--theme-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  font-family: inherit;
}
.rn2-nav-arrow:hover {
  background: #eef2f7;
}
.rn2-nav-arrow.disabled {
  color: #ccc;
  cursor: not-allowed;
  pointer-events: none;
}
.rn2-month-display {
  background: #fff;
  border: none;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  padding: 0 14px;
  font-size: 14px;
  color: var(--theme-primary);
  font-weight: bold;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 130px;
  justify-content: center;
  font-family: inherit;
}
.rn2-month-display:hover {
  background: #f7f7f5;
}
.rn2-month-display--static {
  cursor: default;
  color: #888;
}
.rn2-month-display--static:hover {
  background: #fff;
}
.rn2-month-display-caret {
  font-size: 12px;
  opacity: 0.7;
}
.rn2-month-picker {
  display: none;
  padding: 12px 16px 14px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  box-sizing: border-box;
}
.rn2-month-picker.open {
  display: block;
}
.rn2-month-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  max-width: 900px;
  margin: 0 auto;
  box-sizing: border-box;
}
.rn2-mp-btn {
  padding: 10px 4px;
  border: 1px solid #d4d4d4;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  color: #444;
  text-align: center;
  font-family: inherit;
  box-sizing: border-box;
}
.rn2-mp-btn:hover {
  border-color: var(--theme-primary);
}
.rn2-mp-btn.active {
  background: var(--theme-primary);
  color: #fff;
  border-color: var(--theme-primary);
  font-weight: bold;
}
@media (max-width: 768px) {
  .rn2-nav-arrow {
    min-width: 22px;
    padding: 0 2px;
    font-size: 13px;
  }
  .rn2-month-display {
    min-width: 70px;
    padding: 0 4px;
    font-size: 12px;
    gap: 2px;
  }
  .rn2-month-display-caret {
    font-size: 9px;
  }
  .rn2-month-picker-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   v9: 上部ナビ大幅リニューアル（2026/05）
   ★ stylemh_new.css の末尾に追記してください ★
   
   主な変更：
   - ヘッダー右に受賞一覧ボタン（黄色）を配置
   - ツールバー: PC=横1列 / SP=2段（月ナビ+期間タブ → ルールタブ）
   - 月ナビ矢印を SVG 化、月表示を 15px / min-width:80px に
   - 月表示両サイドの仕切りを天地直線（border → 独立div）
   - 月別/年別/全期間 タブの高さを 38px に統一（角丸 8px）
   ============================================================ */


/* === ヘッダー（タイトル左寄せ + 受賞一覧右配置） === */
.rn2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: 10px;
  padding: 12px 20px;
  font-size: 18px;
}

/* タイトル本体 */
.rn2-header-title {
  font-weight: bold;
  letter-spacing: 0.05em;
  flex: 1;
  min-width: 0;
}

/* ヘッダー内の受賞一覧ボタン（黄色） */
.rn2-prize-header {
  padding: 6px 12px;
  background: #fbbf24;
  color: #3a2400;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.1);
  flex-shrink: 0;
  transition: background 0.15s;
}
.rn2-prize-header:hover {
  background: #f59e0b;
  color: #3a2400;
}

/* 旧 .rn2-tb-prize（ツールバー内の受賞一覧）は完全非表示 */
.rn2-tb-prize {
  display: none !important;
}


/* === ツールバー（横スクロール廃止） === */
.rn2-toolbar {
  flex-wrap: nowrap;
  overflow-x: visible;
  padding: 10px 20px;
  gap: 10px;
}

/* 表示順を CSS で制御（HTML 順は維持できる） */
.rn2-seg.rn2-month-nav { order: 1; }
.rn2-tb-tabs:not(.rn2-tb-rule) { order: 2; }  /* 月別/年別/全期間 */
.rn2-tb-tabs.rn2-tb-rule       { order: 3; }  /* Mリーグルール/リーグ戦 */


/* === 月ナビ === */
.rn2-seg {
  height: 38px;
  min-height: 38px;
  border-radius: 8px;
}

.rn2-nav-arrow {
  width: 36px;
  min-width: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rn2-nav-arrow svg {
  width: 18px;
  height: 18px;
  display: block;
}

.rn2-month-display {
  padding: 0 14px;
  font-size: 15px;
  min-width: 80px;
  letter-spacing: 0.5px;
  /* 旧 border-left/right を解除 → 天地直線の独立divに置換 */
  border-left: none;
  border-right: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 月表示の両サイドの仕切り線（HTMLで span.rn2-seg-divider を挿入） */
.rn2-seg-divider {
  width: 1px;
  background: #e5e7eb;
  flex-shrink: 0;
  align-self: stretch;
}

/* ▾キャレットは廃止（HTMLに残っていても非表示） */
.rn2-month-display-caret {
  display: none;
}


/* === 月別/年別/全期間 タブ（高さを月ナビと統一） === */
.rn2-tb-tabs {
  height: 38px;
  border-radius: 8px;
}
.rn2-tb-tab {
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* === ルールタブのデフォルト（PC時） === */
.rn2-tb-tabs.rn2-tb-rule {
  margin-left: 0;
  height: 38px;
}


/* === PC（≥769px）: 横1列レイアウト === */
@media (min-width: 769px) {
  .rn2-toolbar {
    flex-wrap: nowrap;
    padding: 10px 20px;
  }
  /* 旧 margin-left:auto を解除して左から自然に並べる */
  .rn2-tb-tabs {
    margin-left: 0;
  }
}


/* === SP（≤768px）: 2段レイアウト === */
@media (max-width: 768px) {
  .rn2-header {
    padding: 12px 14px;
    font-size: 16px;
  }
  .rn2-header-title {
    padding-left: 0;
  }

  .rn2-toolbar {
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 8px;
  }

  /* 1段目右側: 月別/年別/全期間 タブ */
  .rn2-tb-tabs:not(.rn2-tb-rule) {
    margin-left: auto;
  }
  .rn2-tb-tabs:not(.rn2-tb-rule) .rn2-tb-tab {
    padding: 0 10px;
    font-size: 13px;
  }

  /* 2段目: ルールタブを横幅100%・半々に分割 */
  .rn2-tb-tabs.rn2-tb-rule {
    flex-basis: 100%;
    width: 100%;
    margin-top: 2px;
  }
  .rn2-tb-tabs.rn2-tb-rule .rn2-tb-tab {
    flex: 1;
    padding: 0 14px;
    min-width: 0;
  }
}