/* Friend card, ranking */
/* FRIEND CARD - MEJORADA */
.friend-card{background:#0d1a0d;border:1px solid var(--friend-color);border-radius:16px;padding:14px 16px;margin:10px 0;display:flex;align-items:flex-start;gap:14px;text-align:left;transition:box-shadow 0.2s,border-color 0.2s;}
.friend-card:hover{box-shadow:0 0 14px rgba(46,204,113,0.3);border-color:#4ae585;}
.friend-avatar{width:68px;height:68px;border-radius:12px;object-fit:cover;background:#222;border:2.5px solid var(--friend-color);flex-shrink:0;box-shadow:0 0 14px rgba(46,204,113,0.35);}
.friend-avatar-online{border-color:var(--neon-green);box-shadow:0 0 10px var(--neon-green);}

/* RANKING */
.ranking-card{background:#0d0d16;border:1px solid #333;border-radius:14px;padding:12px 16px;margin:8px 0;display:flex;align-items:center;gap:14px;text-align:left;transition:border-color 0.2s;}
.ranking-card:hover{border-color:#555;}
.rank-badge{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;flex-shrink:0;font-family:'Arial Black',sans-serif;}
.rank-1{background:linear-gradient(135deg,#ffd700,#ffa000);color:#000;box-shadow:0 0 10px #ffd700;}
.rank-2{background:linear-gradient(135deg,#c0c0c0,#888);color:#000;box-shadow:0 0 8px #aaa;}
.rank-3{background:linear-gradient(135deg,#cd7f32,#a0522d);color:#fff;box-shadow:0 0 8px #cd7f32;}
.rank-other{background:#222;color:#888;border:1px solid #333;}
.rank-me{background:linear-gradient(135deg,var(--neon-blue),#1a5aff);color:#fff;box-shadow:0 0 10px var(--neon-blue);}
.rank-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#222;border:2px solid #333;flex-shrink:0;}
.rank-info{flex:1;}
.rank-name{font-size:13px;font-weight:bold;color:white;}
.rank-score{font-size:11px;color:var(--neon-green);font-weight:bold;margin-top:2px;display:flex;align-items:center;gap:4px;}
.rank-level{font-size:9px;color:var(--level-color);margin-top:2px;}
.rank-you-tag{font-size:8px;background:var(--neon-blue);color:#000;border-radius:10px;padding:1px 6px;font-weight:bold;margin-left:6px;}
.rank-tabs{display:flex;gap:6px;margin-bottom:14px;}
.rank-tab{flex:1;padding:8px;background:#111;border:1px solid #333;color:#888;cursor:pointer;font-size:9px;font-family:'Arial Black',sans-serif;border-radius:6px;transition:all 0.2s;}
.rank-tab.active{background:#fff;color:#000;border-color:#fff;}
.rank-tab:hover:not(.active){background:#222;color:#ccc;}


.friend-info{flex:1;}
.friend-name{font-size:13px;font-weight:bold;color:var(--friend-color);}
.friend-stats-lbl{font-size:9px;color:#888;margin-top:3px;font-family:sans-serif;}
.friend-level-lbl{font-size:10px;color:var(--level-color);font-weight:bold;}
.friend-code-lbl{font-size:9px;color:var(--neon-blue);font-family:monospace;margin-top:2px;letter-spacing:1px;}
.prestige-star-img{width:14px;height:14px;vertical-align:middle;margin-left:3px;}