/* CryptoBound friends list: visual-only upgrade, original 30px row geometry retained. */
#friendsList #friendsListHtml .friendListItem {
    position: relative;
    height: 30px;
    min-height: 30px;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    margin: 1px 2px;
    width: calc(100% - 4px);
    height: 28px;
    min-height: 28px;
    border: 1px solid rgba(62, 202, 244, .42);
    border-left: 3px solid rgba(66, 219, 255, .78);
    border-radius: 7px;
    background:
        radial-gradient(circle at 20% 0, rgba(35, 199, 255, .19), transparent 35%),
        linear-gradient(100deg, rgba(5, 29, 43, .98), rgba(10, 18, 34, .98) 58%, rgba(37, 7, 27, .98));
    box-shadow: inset 0 1px rgba(255, 255, 255, .15), inset 0 -1px rgba(0, 0, 0, .7), 0 1px 4px rgba(0, 0, 0, .55);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, filter .15s ease;
}

#friendsList #friendsListHtml .friendListItem.odd {
    background:
        radial-gradient(circle at 20% 0, rgba(75, 114, 255, .2), transparent 35%),
        linear-gradient(100deg, rgba(8, 34, 49, .99), rgba(15, 19, 39, .98) 58%, rgba(45, 8, 31, .98));
}

#friendsList #friendsListHtml .friendListItem:before {
    content: "";
    position: absolute;
    z-index: 3;
    right: 5px;
    left: auto;
    top: 5px;
    bottom: auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border-radius: 0 2px 2px 0;
    background: #52606b;
    box-shadow: 0 0 6px rgba(82, 96, 107, .55);
    pointer-events: none;
}

#friendsList #friendsListHtml .friendListItem.friend-online:before,
#friendsList #friendsListHtml .friendListItem.friend-here:before {
    background: #25f5a5;
    box-shadow: 0 0 7px rgba(37, 245, 165, .95);
}

#friendsList #friendsListHtml .friendListItem.friend-here:before {
    background: #35d9ff;
    box-shadow: 0 0 8px rgba(53, 217, 255, 1);
}

#friendsList #friendsListHtml .friendListItem:hover {
    border-color: rgba(68, 219, 255, .66);
    background: linear-gradient(90deg, rgba(10, 58, 74, .98), rgba(24, 25, 45, .96) 62%, rgba(74, 10, 35, .94));
    box-shadow: inset 0 0 12px rgba(38, 205, 255, .15), 0 0 7px rgba(29, 207, 255, .24);
    filter: brightness(1.08);
}

#friendsList #friendsListHtml .friendListItem.selected {
    border-color: rgba(255, 207, 70, .9);
    background: linear-gradient(90deg, rgba(18, 95, 113, .98), rgba(52, 26, 48, .97) 65%, rgba(122, 22, 42, .96));
    box-shadow: inset 0 0 12px rgba(55, 224, 255, .2), 0 0 8px rgba(255, 193, 52, .55);
}

#friendsList #friendsListHtml .friendListPhoto {
    top: 2px;
    left: 4px;
    width: 35px !important;
    height: 24px !important;
    box-sizing: border-box;
    border: 1px solid rgba(92, 224, 255, .78);
    border-radius: 5px;
    background: linear-gradient(135deg, rgba(14, 79, 105, .92), rgba(15, 9, 31, .96));
    box-shadow: inset 0 0 7px rgba(44, 211, 255, .2), 0 0 5px rgba(43, 212, 255, .48);
}

#friendsList #friendsListHtml .friendListPhoto img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 2px;
    filter: saturate(1.08) contrast(1.05) drop-shadow(0 0 3px rgba(57, 218, 255, .52));
}

#friendsList #friendsListHtml .friendListRank {
    left: 42px;
    top: 2px;
    border-radius: 3px;
    background-color: rgba(4, 17, 28, .82);
    box-shadow: inset 0 0 4px rgba(61, 220, 255, .28);
    filter: drop-shadow(0 0 3px rgba(255, 206, 61, .55));
}

#friendsList #friendsListHtml .friendListName {
    left: 69px;
    right: 13px;
    top: 0;
    height: 15px;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: .15px;
    text-overflow: ellipsis;
    text-shadow: 0 1px 1px #000, 0 0 5px rgba(60, 211, 255, .35);
}

#friendsList #friendsListHtml .friendListGP {
    left: 43px;
    top: 16px;
    width: 61px;
    color: #ffd75a;
    font-size: 8px;
    line-height: 11px;
    font-weight: 700;
    text-shadow: 0 1px 1px #000, 0 0 5px rgba(255, 190, 42, .44);
}

#friendsList #friendsListHtml .friendListLocation {
    left: 105px;
    right: 4px;
    top: 14px;
    height: 13px;
    box-sizing: border-box;
    padding: 0 3px;
    border: 1px solid rgba(255, 86, 109, .35);
    border-radius: 7px;
    background: rgba(91, 12, 31, .55);
    color: #ff9eae;
    font-size: 8px;
    line-height: 11px;
    font-weight: 700;
    text-align: right;
    text-overflow: ellipsis;
    text-shadow: 0 1px 1px #000;
}

#friendsList #friendsListHtml .friend-online .friendListLocation {
    color: #51efad;
    border-color: rgba(45, 239, 161, .48);
    background: rgba(7, 83, 58, .58);
    text-shadow: 0 0 5px rgba(36, 238, 160, .38), 0 1px 1px #000;
}

#friendsList #friendsListHtml .friend-here .friendListLocation {
    color: #55ddff;
    border-color: rgba(64, 218, 255, .55);
    background: rgba(5, 75, 96, .62);
    text-shadow: 0 0 6px rgba(49, 215, 255, .5), 0 1px 1px #000;
}

#friendsList #friendsListHtml .friend-offline {
    border-left-color: rgba(255, 69, 96, .72);
    filter: saturate(.92);
}

#friendsList #friendsListHtml .friend-offline:hover {
    filter: saturate(.9) brightness(1.08);
}

#friendsList #friendsListHtml .friendRouletteStatusIcon,
#friendsList #friendsListHtml .friendMinesStatusIcon,
#friendsList #friendsListHtml .friendDiceStatusIcon {
    width: 10px;
    height: 10px;
    margin: -1px 2px 0 0;
    filter: drop-shadow(0 0 3px rgba(255, 210, 59, .72));
}

/* The guild roster uses the same compact card system as the friends roster. */
#guildMembersList #guildMembersListHtml .guildMemberListItem {
    position: relative;
    width: calc(100% - 4px);
    height: 28px;
    min-height: 28px;
    margin: 1px 2px;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(62, 202, 244, .42);
    border-left: 3px solid rgba(66, 219, 255, .78);
    border-radius: 7px;
    background: radial-gradient(circle at 20% 0, rgba(35, 199, 255, .19), transparent 35%), linear-gradient(100deg, rgba(5, 29, 43, .98), rgba(10, 18, 34, .98) 58%, rgba(37, 7, 27, .98));
    box-shadow: inset 0 1px rgba(255, 255, 255, .15), inset 0 -1px rgba(0, 0, 0, .7), 0 1px 4px rgba(0, 0, 0, .55);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, filter .15s ease;
}

#guildMembersList #guildMembersListHtml .guildMemberListItem.odd {
    background: radial-gradient(circle at 20% 0, rgba(75, 114, 255, .2), transparent 35%), linear-gradient(100deg, rgba(8, 34, 49, .99), rgba(15, 19, 39, .98) 58%, rgba(45, 8, 31, .98));
}

#guildMembersList #guildMembersListHtml .guildMemberListItem:before {
    content: "";
    position: absolute;
    z-index: 3;
    right: 5px;
    top: 5px;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: #52606b;
    box-shadow: 0 0 6px rgba(82, 96, 107, .55);
    pointer-events: none;
}

#guildMembersList #guildMembersListHtml .friend-online:before {
    background: #25f5a5;
    box-shadow: 0 0 7px rgba(37, 245, 165, .95);
}

#guildMembersList #guildMembersListHtml .friend-here:before {
    background: #35d9ff;
    box-shadow: 0 0 8px rgba(53, 217, 255, 1);
}

#guildMembersList #guildMembersListHtml .guildMemberListItem:hover {
    border-color: rgba(68, 219, 255, .66);
    background: linear-gradient(90deg, rgba(10, 58, 74, .98), rgba(24, 25, 45, .96) 62%, rgba(74, 10, 35, .94));
    box-shadow: inset 0 0 12px rgba(38, 205, 255, .15), 0 0 7px rgba(29, 207, 255, .24);
    filter: brightness(1.08);
}

#guildMembersList #guildMembersListHtml .guildMemberListItem.selected {
    border-color: rgba(255, 207, 70, .9);
    background: linear-gradient(90deg, rgba(18, 95, 113, .98), rgba(52, 26, 48, .97) 65%, rgba(122, 22, 42, .96));
    box-shadow: inset 0 0 12px rgba(55, 224, 255, .2), 0 0 8px rgba(255, 193, 52, .55);
}

#guildMembersList #guildMembersListHtml .friendListPhoto {
    top: 2px;
    left: 4px;
    width: 35px !important;
    height: 24px !important;
    box-sizing: border-box;
    border: 1px solid rgba(92, 224, 255, .78);
    border-radius: 5px;
    background: linear-gradient(135deg, rgba(14, 79, 105, .92), rgba(15, 9, 31, .96));
    box-shadow: inset 0 0 7px rgba(44, 211, 255, .2), 0 0 5px rgba(43, 212, 255, .48);
}

#guildMembersList #guildMembersListHtml .friendListPhoto img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 2px;
    filter: saturate(1.08) contrast(1.05) drop-shadow(0 0 3px rgba(57, 218, 255, .52));
}

#guildMembersList #guildMembersListHtml .friendListRank {
    left: 42px;
    top: 2px;
    border-radius: 3px;
    background-color: rgba(4, 17, 28, .82);
    box-shadow: inset 0 0 4px rgba(61, 220, 255, .28);
    filter: drop-shadow(0 0 3px rgba(255, 206, 61, .55));
}

#guildMembersList #guildMembersListHtml .friendListName {
    left: 69px;
    right: 13px;
    top: 0;
    height: 15px;
    color: #fff;
    text-align: left;
    font-weight: 700;
    letter-spacing: .15px;
    text-overflow: ellipsis;
    text-shadow: 0 1px 1px #000, 0 0 5px rgba(60, 211, 255, .35);
}

#guildMembersList #guildMembersListHtml .friendListGP {
    left: 43px;
    top: 16px;
    width: 61px;
    color: #ffd75a;
    font-size: 8px;
    line-height: 11px;
    font-weight: 700;
    text-shadow: 0 1px 1px #000, 0 0 5px rgba(255, 190, 42, .44);
}

#guildMembersList #guildMembersListHtml .friendListLocation {
    left: 105px;
    right: 4px;
    top: 14px;
    height: 13px;
    box-sizing: border-box;
    padding: 0 3px;
    overflow: hidden;
    border: 1px solid rgba(255, 86, 109, .35);
    border-radius: 7px;
    background: rgba(91, 12, 31, .55);
    color: #ff9eae;
    font-size: 8px;
    line-height: 11px;
    font-weight: 700;
    text-align: right;
    text-overflow: ellipsis;
    text-shadow: 0 1px 1px #000;
}

#guildMembersList #guildMembersListHtml .friend-online .friendListLocation {
    color: #51efad;
    border-color: rgba(45, 239, 161, .48);
    background: rgba(7, 83, 58, .58);
}

#guildMembersList #guildMembersListHtml .friend-here .friendListLocation {
    color: #55ddff;
    border-color: rgba(64, 218, 255, .55);
    background: rgba(5, 75, 96, .62);
}

#guildMembersList #guildMembersListHtml .friend-offline {
    border-left-color: rgba(255, 69, 96, .72);
    filter: saturate(.92);
}