/* ✅ 전체 박스 */
.hof-box {
  background: #3b3d4a;
  border-radius: 10px;
  padding: 20px 20px 5px 20px;
  box-shadow:
    4px 4px 12px rgba(15,15,15,0.35),
    -4px -4px 10px rgba(70,70,70,0.25),
    inset 0 0 0 1px rgba(255,255,255,0.05);
}

/* ✅ 제목 */
.hof-title {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:18px;
  font-weight:700;
  color:#fff;
  border-left:3px solid #7a84ff;
  padding-left:10px;
  margin-bottom:22px;
}
.hof-title svg {
  filter:drop-shadow(0 0 10px rgba(255,215,91,0.8));
}

/* ✅ 아이템 카드 */
.hof-item {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
  border-radius:14px;
  padding:14px 16px 12px;
  margin-bottom:18px;
  box-shadow:
    0 3px 12px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  transition: all 0.25s ease;
}
.hof-item.hof-first {
  border:1px solid rgba(255,215,91,0.45);
  background: linear-gradient(145deg, #4a463d, #2f2f35);
  box-shadow: 0 0 22px rgba(255,215,91,0.3);
}

/* ✅ 상단 구조 */
.hof-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}

/* ✅ 트로피 */
.hof-rank img {
  width:36px;
  height:auto;
  margin-right:10px;
  flex-shrink:0;
}

/* ✅ 닉네임 */
.hof-name {
  flex:1;
  font-weight:600;
  font-size:16px;
  color:#fff;
  text-shadow:0 0 4px rgba(0,0,0,0.4);
  margin-left:6px;
}

/* ✅ 레벨/포인트 */
.hof-stat {
  text-align:right;
  font-size:14px;
  line-height:1.3;
}
.hof-stat div {
  font-weight:700;
  color:#ffd95b;
}
.hof-stat small {
  color:#7a84ff;
  opacity:0.9;
}

/* ✅ 게이지바 */
.hof-bar-wrap {
  background: rgba(255,255,255,0.08);
  border-radius:10px;
  height:8px;
  overflow:hidden;
}
.hof-bar {
  height:100%;
  border-radius:10px;
  width:0%;
  transition: width 1.3s ease-out;
}
.hof-bar-1 {
  background: linear-gradient(90deg,#ffd95b,#ffb347);
  box-shadow: 0 0 10px rgba(255,215,91,0.4);
}
.hof-bar-2 {
  background: linear-gradient(90deg,#aab2ff,#7a84ff);
  box-shadow: 0 0 10px rgba(122,132,255,0.4);
}
.hof-bar-3 {
  background: linear-gradient(90deg,#ffb77a,#ff8c5b);
  box-shadow: 0 0 10px rgba(255,139,91,0.4);
}