/* rankings.css — 公開レートランキングページ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  background: #0d1117;
  color: #e6edf3;
  min-height: 100vh;
  padding: 16px;
}
.rk-wrap { max-width: 760px; margin: 0 auto; }

.rk-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.rk-header h1 { font-size: 22px; font-weight: 800; letter-spacing: .02em; }
.rk-header .rk-trophy { font-size: 26px; }
.rk-nav { margin-left: auto; display: flex; gap: 8px; }
.rk-nav a {
  color: #8b949e; text-decoration: none; font-size: 13px; padding: 6px 10px;
  border: 1px solid #30363d; border-radius: 8px; transition: all .15s;
}
.rk-nav a:hover { color: #e6edf3; border-color: #8b949e; }

/* ゲームタブ */
.rk-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.rk-tab {
  padding: 8px 16px; border-radius: 999px; border: 1px solid #30363d;
  background: transparent; color: #8b949e; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.rk-tab:hover { color: #e6edf3; border-color: #58a6ff; }
.rk-tab.active { background: #1f6feb; border-color: #1f6feb; color: #fff; }

/* 自分の順位ハイライト */
.rk-myrank {
  background: linear-gradient(135deg, rgba(31,111,235,.18), rgba(31,111,235,.05));
  border: 1px solid #1f6feb; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 14px;
}
.rk-myrank .rk-my-pos { font-size: 26px; font-weight: 800; color: #58a6ff; min-width: 56px; }
.rk-myrank .rk-my-info { flex: 1; }
.rk-myrank .rk-my-name { font-size: 15px; font-weight: 700; }
.rk-myrank .rk-my-sub { font-size: 12px; color: #8b949e; margin-top: 2px; }
.rk-myrank .rk-my-rating { font-size: 24px; font-weight: 800; }
.rk-myrank.provisional { border-color: #d29922; }
.rk-myrank.provisional .rk-my-pos { color: #d29922; font-size: 15px; }

/* ランキングテーブル */
.rk-list { border: 1px solid #30363d; border-radius: 12px; overflow: hidden; }
.rk-row {
  display: grid; grid-template-columns: 52px 1fr auto auto; align-items: center;
  gap: 10px; padding: 12px 14px; border-bottom: 1px solid #21262d;
}
.rk-row:last-child { border-bottom: none; }
.rk-row.is-self { background: rgba(31,111,235,.12); }
.rk-rank { font-size: 17px; font-weight: 800; text-align: center; color: #8b949e; }
.rk-rank.top1 { color: #ffd700; }
.rk-rank.top2 { color: #c0c0c0; }
.rk-rank.top3 { color: #cd7f32; }
.rk-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-tier { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.rk-rating { font-size: 17px; font-weight: 800; text-align: right; min-width: 56px; }
.rk-wl { font-size: 11px; color: #8b949e; text-align: right; min-width: 56px; }

.rk-empty { padding: 40px 16px; text-align: center; color: #8b949e; font-size: 14px; }
.rk-loading { padding: 40px 16px; text-align: center; color: #8b949e; }
.rk-disabled { padding: 60px 16px; text-align: center; color: #8b949e; }

/* 直近対戦フィード */
.rk-feed-title { font-size: 14px; font-weight: 700; color: #8b949e; margin: 24px 0 10px; }
.rk-feed { display: flex; flex-direction: column; gap: 6px; }
.rk-feed-item {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  padding: 8px 12px; background: #161b22; border-radius: 8px; color: #c9d1d9;
}
.rk-feed-item .rk-feed-game { color: #8b949e; }
.rk-feed-item .rk-feed-delta.up { color: #3fb950; font-weight: 700; }
.rk-feed-item .rk-feed-delta.down { color: #f85149; font-weight: 700; }
.rk-feed-item .rk-feed-time { margin-left: auto; color: #6e7681; }

@media (max-width: 480px) {
  .rk-wl { display: none; }
  .rk-row { grid-template-columns: 44px 1fr auto; }
}