/* /css/rank-frames.css — ランキング上位 3 のアバターフレーム (ADR-14 D4・PR-3a 2026-09-21)。
   描くのは js/rank-frames.js。移植元 = docs/design/prototype/proto.css「アバターフレーム」節。
   .framed-av 自体は箱のサイズを持たない — 親 (例 .home-channel-avatar) の width / height に追従して
   旧 <img> と同じ箱のまま枠だけ足す (レイアウト崩れ防止)。
   rings-2 / rings-3 は併存リングぶんアバター画像を縮小するフック (1 期間だけなら付かない)。
   金 / 銀 / 銅はブランド色ではなく順位の記号なので固定 hex (bubblegum の --b-* に寄せない)。 */
.framed-av { position: relative; display: inline-flex; width: 100%; height: 100%; }
.framed-av-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; transition: transform .15s; }
.framed-av.rings-2 .framed-av-img { transform: scale(.78); }
.framed-av.rings-3 .framed-av-img { transform: scale(.62); }
.framed-av-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.framed-av-badges {
  position: absolute; left: 50%; top: 100%; margin-top: -6px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none;
}
.framed-av-badge {
  font-size: 9px; font-weight: 700; line-height: 1.3; color: #fff; background: #23232a;
  padding: 2px 7px; white-space: nowrap; border-radius: 2px;
}
.framed-av-badge.tier-gold { background: #d4af37; color: #3a2e00; }
.framed-av-badge.tier-silver { background: #b8bcc4; color: #23232a; }
.framed-av-badge.tier-bronze { background: #b07a45; color: #fff; }
/* size-lg (96px 以上) は月→週→日を横一列 (縦積みは行の下端を 30px 超えて次の行に重なる = プロト 2026-09-14 実測) */
.framed-av.size-lg .framed-av-badges { flex-direction: row; gap: 3px; margin-top: -8px; }
/* size-sm は最上位 1 枚だけ。JS で 1 枚に絞るが、保険として CSS でも隠す */
.framed-av.size-sm .framed-av-badges .framed-av-badge:nth-child(n+2) { display: none; }
@media (max-width: 768px) {
  .framed-av-badge { font-size: 8px; padding: 1px 5px; }
  .framed-av-badges { margin-top: -5px; gap: 1px; }
}

/* ホーム④: 枠の下端に帯が乗るので名前との間を少し空ける。LIVE 印 (.home-channel-live) は枠の外側に残す */
.home-channel-avatar .home-channel-live { z-index: 1; }
.home-channel-avatar:has(.framed-av) { margin-bottom: 8px; }