/* Friends layout rollout: desktop keeps the richer table; mobile uses the responsive cards. */
.friends-table-wrap{display:block}
.friends-mobile-list{display:none}
@media(max-width:640px){
  .friends-table-wrap{display:none!important}
  .friends-mobile-list{display:block}
}

/* Friend badge collection: isolated styles, leaving existing leaderboard layout intact. */
.friends-badge-stat{cursor:pointer;font:inherit;color:inherit;background:transparent;border:0;text-align:left;width:100%;}
.friends-badge-stat:hover strong,.friends-badge-stat:focus-visible strong{text-decoration:underline;}
.friends-badge-modal[hidden]{display:none!important}
.friends-badge-modal{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.58);display:flex;align-items:center;justify-content:center;padding:18px;}
.friends-badge-dialog{position:relative;width:min(520px,100%);max-height:min(80vh,720px);overflow:auto;background:var(--card,#fff);color:var(--text,#222);border-radius:16px;padding:22px;box-shadow:0 16px 60px rgba(0,0,0,.28);}
.friends-badge-dialog h3{margin:0 42px 16px 0;font-size:1.2rem;}
.friends-badge-close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:30px;line-height:1;cursor:pointer;color:inherit;}
.friends-badge-list{display:grid;gap:10px;}
.friends-earned-badge{display:flex;align-items:flex-start;gap:12px;padding:12px;border:1px solid rgba(128,128,128,.25);border-radius:12px;}
.friends-earned-emoji{font-size:30px;line-height:1.2;flex:0 0 36px;text-align:center;}
.friends-earned-badge strong{display:block;}
.friends-earned-badge p{margin:3px 0 5px;font-size:.9rem;}
.friends-earned-badge time{font-size:.78rem;opacity:.7;}
.friends-no-badges{opacity:.75;text-align:center;padding:20px 8px;}

/* Compact medal control beside each friend's name. */
.friends-profile-head{display:flex;align-items:center;gap:8px;}
.friends-badge-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border:0;background:transparent;padding:3px 5px;margin:0;color:inherit;font-size:1.25rem;line-height:1;cursor:pointer;border-radius:8px;}
.friends-badge-icon:hover{background:rgba(128,128,128,.14);transform:translateY(-1px);}
.friends-badge-icon:focus-visible{outline:2px solid currentColor;outline-offset:2px;}