/* =============================================================
   components/rank-badge.css
   ランクバッジ 2種類（Figma 実測値）
   ============================================================= */

/* ─── 共通カラー変数（両バッジで使用） ─── */
/* 色は design-tokens.css の --color-rank-* を参照 */

/* ─────────────────────────────────────────────────────────────
   円形バッジ（Type-A: 横スクロールカード用）
   サイズ: 50×50px、border-radius: 25px
   フォント: 14px Medium、position: absolute left 5px top 5px
   3位テキスト: 黒（Type-Cと異なる）
   ───────────────────────────────────────────────────────────── */

.rank-badge-circle {
  position: absolute;
  left: 5px;
  top: 5px;
  width: var(--scroll-badge-size);   /* 50px */
  height: var(--scroll-badge-size);  /* 50px */
  border-radius: 25px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--text-badge-circle);  /* 14px */
  font-weight: var(--fw-medium);
  text-align: center;
  line-height: 1;
  /* デフォルト: 4位以上 */
  background: var(--color-rank-other-bg);
  color: var(--color-rank-other-text);
}

.rank-badge-circle.is-1st {
  background: var(--color-rank-1-bg);
  color: var(--color-rank-1-text);
}

.rank-badge-circle.is-2nd {
  background: var(--color-rank-2-bg);
  color: var(--color-rank-2-text);
}

.rank-badge-circle.is-3rd {
  background: var(--color-rank-3-bg);
  color: var(--color-rank-3-text-circle);  /* 黒 */
}

/* ─────────────────────────────────────────────────────────────
   矩形バッジ（Type-C: 水平リスト用）
   サイズ: 35×20px、矩形（border-radius なし）
   フォント: 10px Regular、position: static（テキストエリア先頭）
   3位テキスト: #FCFCFC（Type-Aと異なる）
   ───────────────────────────────────────────────────────────── */

.rank-badge-rect {
  display: block;
  width: 35px;
  height: 20px;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: var(--text-badge-rect);  /* 10px */
  font-weight: var(--fw-regular);
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
  /* デフォルト: 4位以上 */
  background: var(--color-rank-other-bg);
  color: var(--color-rank-other-text);
}

.rank-badge-rect.is-1st {
  background: var(--color-rank-1-bg);
  color: var(--color-rank-1-text);
}

.rank-badge-rect.is-2nd {
  background: var(--color-rank-2-bg);
  color: var(--color-rank-2-text);
}

.rank-badge-rect.is-3rd {
  background: var(--color-rank-3-bg);
  color: var(--color-rank-3-text-rect);  /* #FCFCFC */
}

/* ─── セールバッジ（グリッドカード用） ─── */
.badge-sale {
  display: inline-block;
  background: #E53935;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: var(--fw-medium);
  line-height: 1;
  padding: 3px 6px;
  border-radius: 3px;
  margin-bottom: 4px;
}