/* VNJ Pro Devices v2 — フロント表示
   色・フォント・余白は VNJ デザイントークン(--vnj-*)に追従します（light / dark / blaze を自動切替）。
   各 var() の第2引数は「VNJ環境の外（トークン未読込）」で使う場合のフォールバック＝旧デフォルト値です。
   さらに細かく調整したい場合は、子テーマ等で下の --xpd-* を上書きしてください。 */

.xpd-table-wrap,
.xpd-ranking,
.xpd-device-page{
  /* ---- 色（VNJトークンへブリッジ） ---- */
  --xpd-accent:        var(--vnj-red, #ff4655);                 /* 主アクセント＝VNJモノトーン（ライト=黒 / ダーク=白 / blazeのみ赤）。ランキングバー・購入ボタン */
  --xpd-buy-hover:     #ff4655;                                 /* 購入ボタンのホバー＝コマース赤（VNJ慣習：CTA/セールは赤で統一） */
  --xpd-on:            var(--vnj-on, #fff);                     /* アクセント塗りの上の文字色 */
  --xpd-text:          var(--vnj-text, #15181d);
  --xpd-muted:         var(--vnj-dim, #70757d);
  --xpd-faint:         var(--vnj-faint, #9aa0a8);
  --xpd-border:        var(--vnj-line, rgba(21,24,29,.08));
  --xpd-border-strong: var(--vnj-line-strong, rgba(21,24,29,.18));
  --xpd-track:         var(--vnj-line, rgba(21,24,29,.06));
  --xpd-chip-bg:       var(--vnj-panel-2, rgba(21,24,29,.05));
  --xpd-chip-bg-hover: var(--vnj-panel, rgba(21,24,29,.10));
  --xpd-row-hover:     var(--vnj-panel-2, rgba(21,24,29,.03));
  --xpd-surface:       var(--vnj-panel, #fff);
  /* ---- フォント（VNJタイポ体系へブリッジ） ---- */
  --xpd-ff-disp:       var(--vnj-ff-disp, inherit);             /* 英字ラベル・UI見出し（Rajdhani） */
  --xpd-ff-head:       var(--vnj-ff-head, inherit);             /* 見出し（Noto Sans JP） */
  --xpd-ff-mono:       var(--vnj-ff-mono, inherit);             /* 数値・メタ（JetBrains Mono） */
  color:var(--xpd-text);
  font-family:var(--vnj-ff-body, inherit);
  font-size:14px;
  line-height:1.6;
}

/* ---- ヘッダー＆ツールバー ---- */
.xpd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--xpd-border-strong);padding-bottom:14px;}
.xpd-eyebrow{font-family:var(--xpd-ff-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--xpd-faint);margin-bottom:5px;}
.xpd-title{font-family:var(--xpd-ff-head);font-size:21px;font-weight:800;letter-spacing:-.01em;}
.xpd-toolbar{display:flex;gap:8px;flex-wrap:wrap;}
.xpd-search-input,
.xpd-toolbar select{padding:7px 14px;border:1px solid var(--xpd-border-strong);border-radius:999px;font-size:13px;font-family:inherit;background:var(--xpd-surface);color:var(--xpd-text);}
.xpd-search-input{min-width:190px;}
.xpd-search-input::placeholder{color:var(--xpd-faint);}
.xpd-search-input:focus,
.xpd-toolbar select:focus{outline:2px solid var(--xpd-accent);outline-offset:1px;}

/* ---- 一覧テーブル ----
   ※ セル枠線・リンク色は .xpd-table-wrap で詳細度を上げ、固定ページ(.vnj-page-body)や
     記事本文(.vnj-pv-abody)の汎用 table / a スタイルに勝てるようにしている。 */
.xpd-table-scroll{overflow-x:auto;}
.xpd-table{width:100%;min-width:760px;border-collapse:collapse;}
.xpd-table-wrap .xpd-table th{text-align:left;padding:12px 12px 10px;font-family:var(--xpd-ff-disp);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--xpd-faint);border:0;border-bottom:1px solid var(--xpd-border);white-space:nowrap;background:transparent;}
.xpd-table th.xpd-sortable{cursor:pointer;user-select:none;}
.xpd-table th.xpd-sortable:hover{color:var(--xpd-text);}
.xpd-table th.xpd-asc::after{content:" \2191";color:var(--xpd-text);}
.xpd-table th.xpd-desc::after{content:" \2193";color:var(--xpd-text);}
.xpd-table-wrap .xpd-table td{padding:13px 12px;border:0;border-bottom:1px solid var(--xpd-border);vertical-align:top;background:transparent;}
.xpd-table-wrap .xpd-table tbody tr:hover{background:var(--xpd-row-hover);}

.xpd-player-name{font-weight:700;font-size:14px;white-space:nowrap;}
.xpd-player-sub{font-size:11px;color:var(--xpd-faint);margin-top:2px;white-space:nowrap;}
.xpd-flag{font-size:1.1em;}

.xpd-dev-name{white-space:nowrap;}
.xpd-table-wrap .xpd-buy-link{color:var(--xpd-text);font-weight:500;text-decoration:none;border-bottom:1px solid var(--xpd-border-strong);padding-bottom:1px;transition:border-color .15s,color .15s;}
.xpd-table-wrap .xpd-buy-link:hover{color:var(--xpd-accent);border-color:var(--xpd-accent);}
.xpd-ext{font-family:var(--xpd-ff-mono);font-size:11px;color:var(--xpd-faint);margin-left:2px;}
.xpd-dev-plain{color:var(--xpd-text);font-weight:500;}
.xpd-dev-sub{margin-top:4px;}
.xpd-table-wrap .xpd-chip{display:inline-block;font-size:11px;color:var(--xpd-muted);background:var(--xpd-chip-bg);border-radius:999px;padding:1px 9px;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s;}
.xpd-table-wrap .xpd-chip:hover{background:var(--xpd-chip-bg-hover);color:var(--xpd-text);}
.xpd-empty{color:var(--xpd-faint);}

.xpd-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--xpd-faint);}

/* ---- 使用率ランキング ---- */
.xpd-ranking-head{display:flex;align-items:center;gap:9px;font-family:var(--xpd-ff-head);font-size:16px;font-weight:800;margin-bottom:14px;}
.xpd-ranking-bar-mark{width:4px;height:18px;background:var(--xpd-accent);border-radius:2px;display:inline-block;}
.xpd-ranking-list{display:flex;flex-direction:column;gap:10px;}
.xpd-rank-row{display:grid;grid-template-columns:24px 1fr 40px;align-items:center;gap:10px;}
.xpd-rank-num{font-family:var(--xpd-ff-mono);font-size:14px;font-weight:600;color:var(--xpd-faint);text-align:center;}
.xpd-rank-num.is-top{color:var(--xpd-accent);}
.xpd-rank-name{font-size:14px;margin-bottom:5px;}
.xpd-ranking .xpd-rank-name a{color:var(--xpd-text);font-weight:500;text-decoration:none;}
.xpd-ranking .xpd-rank-name a:hover{color:var(--xpd-accent);}
.xpd-rank-maker{font-family:var(--xpd-ff-disp);font-size:11px;color:var(--xpd-faint);margin-left:6px;letter-spacing:.04em;text-transform:uppercase;}
.xpd-rank-track{display:block;height:8px;background:var(--xpd-track);border-radius:999px;overflow:hidden;}
.xpd-rank-fill{display:block;height:100%;background:var(--xpd-accent);border-radius:999px;}
.xpd-rank-count{font-family:var(--xpd-ff-mono);font-size:14px;font-weight:600;text-align:right;}

/* ---- デバイス別ページ ---- */
.xpd-device-page{max-width:var(--vnj-prose, 760px);margin:0 auto;padding:1rem 0;}
.xpd-device-card{border:1px solid var(--xpd-border);border-radius:var(--vnj-cut, 12px);padding:22px 24px;background:var(--xpd-surface);}
.xpd-device-meta{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.xpd-cat-badge{font-family:var(--xpd-ff-disp);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--xpd-muted);border:1px solid var(--xpd-border-strong);padding:2px 10px;border-radius:999px;}
.xpd-maker{font-family:var(--xpd-ff-disp);font-size:12px;color:var(--xpd-faint);letter-spacing:.04em;text-transform:uppercase;}
.xpd-device-title{font-family:var(--xpd-ff-head);font-size:24px;font-weight:800;margin:0;letter-spacing:-.01em;}
.xpd-device-actions{margin-top:16px;}
.xpd-buy-btn{display:inline-flex;align-items:center;gap:6px;background:var(--xpd-accent);color:var(--xpd-on);padding:10px 24px;border-radius:var(--vnj-cut, 8px);font-weight:700;text-decoration:none;transition:background .15s,color .15s;}
.xpd-buy-btn:hover{background:var(--xpd-buy-hover);color:#fff;}
.xpd-device-users{margin-top:1.75rem;}
.xpd-users-head{font-family:var(--xpd-ff-head);font-size:16px;font-weight:800;}
.xpd-users-count{font-size:12px;color:var(--xpd-faint);margin:2px 0 12px;}
.xpd-user-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--xpd-border);}
.xpd-user-name{font-weight:700;}
.xpd-device-page .xpd-user-name a{color:inherit;text-decoration:none;}
.xpd-device-page .xpd-user-name a:hover{color:var(--xpd-accent);}
.xpd-user-gear{font-size:13px;color:var(--xpd-muted);text-align:right;}

@media (max-width:600px){
  .xpd-user-gear{display:none;}
  .xpd-head{align-items:flex-start;flex-direction:column;}
}

/* ---- 選手名リンク（既存選手DBへ） ---- */
.xpd-table-wrap .xpd-player-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s;}
.xpd-table-wrap .xpd-player-link:hover{color:inherit;border-bottom-color:var(--xpd-border-strong);}